Question

我正在尝试建立一个响应式网站，我想知道是否应该使用设备工具栏来查看更新，还是只是增加或减少视口宽度，如下所示：

一切正常，至少那是我一开始以为将视口的宽度减小到与先前的宽度相同的宽度（我用于设备工具栏的宽度为320px ）我发现文字不知道为什么会折叠，但是我认为这是因为我没有指定精确的高度，是真的吗？

当我选择指定的设备（例如iPhone X）时，发生了一些崩溃，因此我不知道我的解决方案是否还可以，但是我认为我应该根据媒体信息添加具有精确宽度和高度的媒体查询该设备的尺寸，因此它将是该特定设备的指定设计，但是我认为使用该解决方案将导致大量的媒体查询，因此我认为这不是最佳解决方案。

抱歉，这看起来很愚蠢，但是我是一个初学者，我正在尽最大努力提高自己的技能，所以在此先感谢您的答复

这是我的代码：

HTML：

<div class="header-box">
<ul class="main-nav">
  <li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
  <li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
  <li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
  <h1 class="big-heading"><span class="name">M.Amine Elwere</span> Front-end <br /> Web developer</h1>
</div>
<div class="vector-1">
  <div class="box">
    <img src="../vector/cloud.png"    data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
  </div>
  <img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
</div>

</div>
<!--trapezoid-->
<img src="../vector/murva 1.1.png" class="img-murv"  data-aos="zoom-out-up" alt="">
<img src="../vector/Png for the web/header minou2.png" class="img-back" data-aos-duration="1500"    data-aos="zoom-in" alt="">
<div class="trapezoid">
<div class="circle"></div>
<div class="text-2">
  <span data-aos="fade-right" data-aos-duration="1000" class="saluation">Hi I'am Murva 1.0</span> <span  data-aos="fade-down" data-aos-duration="2000" class="welcome">Welcome</span>
</div>
</div>


<!--Murva 1.0-->
<img src="../vector/murva 1.1.png" class="img-m" alt="">

<p class="leading"><span  data-aos="fade-right" data-aos-duration="1500" class="sub-leading__1">I think you got some questions.</span> <span  data-aos="fade-left"  data-aos-duration="2000" class="sub-leading__2"> I knew that, Ok let me just walk you through this lovely website </span>
  <p class="leading"><span  data-aos="fade-right" data-aos-duration="1500" class="sub-leading__1">I think you got some questions.</span> <span  data-aos="fade-left"  data-aos-duration="2000" class="sub-leading__2"> I knew that, Ok let me just walk you through this lovely website </span>
<span class="sub-leading__3"  data-aos="fade-right"  data-aos-duration="1600"  >and I will answer all of them on the</span><span class="sub-leading__4"  data-aos="fade-right"  data-aos-duration="2000" >ROAD...</span>

</p>

<!--Murva 0.0-->

<img src="../vector/Mino-1 hiding.png" class="img-m1"  data-aos="fade-left" alt="">
<p class="leading-2">
<span class="sub-lea__1"  data-aos="fade-right"  data-aos-duration="1500">Hi</span>
<span class="sub-lea__2"  data-aos="fade-left"  data-aos-duration="2000">I’m Murva 0.0</span>
<span class="sub-lea__3"  data-aos="fade-left"  data-aos-duration="3000">sorry I saluate you in the header but i didn’t introduce my self</span><br />
<span class="sub-lea__4"  data-aos="fade-up"  data-aos-duration="2000" >I’m the first version in the <span class="word-0">Murva</span> family and who
told you <span class="word-1">“welcome”</span> above,that was my little brother,
ahh sorry I interrupt your walk I just wanted to say Hi  So </span>
<span class="sub-lea__5"  data-aos="zoom-in-up"  data-aos-duration="2000">We’ ll catch up later.</span>
</p>

CSS：

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ffffcc;
  overflow-x: hidden;
  height: 10000px;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translate(-100px);
  }

  ,
  80% {
    transform: translate(20px);
  }

  100% {
    opacity: 1;
    transform: translate(0px);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }

  ,
  80% {
    transform: translateX(-100px);
  }

  ,
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@media (max-width:319px) {
  .header-box {
    width: 100vw;
    height: 90vh;
    background-color: #33cccc;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
    position: relative;
  }

  .main-nav {
    display: flex;
    list-style-type: none;
    justify-content: space-around;
    width: 100vw;
    text-align: right;
  }

  .main-nav__link {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffcc;
  }

  .text {
    font-family: Roboto;
    font-weight: bold;
    font-size: 20px;
    color: #ffffcc;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
  }

  .name {
    font-size: 1rem;
    display: block;
    animation-name: moveInLeft;
    animation-duration: 2s;
  }

  .vector-1 {
    position: relative;
    height: 37vh;
  }

  .img-dialogue {
    width: 60%;
    position: absolute;
    left: 20%;
    bottom: 57%;
    z-index: -1;
  }

  .dialogue {
    font-family: Roboto;
    color: #33cccc;
    position: absolute;
    top: 24px;
    left: 55px;
    display: inline-block;
  }

  .img-header {
    width: 60%;
    position: absolute;
    bottom: 9px;
  }

  .saluation {
    position: absolute;
    bottom: 50vh;
    font-family: Roboto;
    font-size: 1.7rem;
    left: 30vw;
  }

  .welcome {
    position: absolute;
    bottom: 31vh;
    font-size: 15vw;
    font-family: Roboto;
    font-weight: bold;
    left: 3vw;
  }

  .img-murv {
    position: absolute;
    z-index: 1;
    width: 20.31rem;
    right: -2.44rem;
  }

  .img-back {
    position: absolute;
    z-index: -1;
    width: 36vw;
    height: 64vh;
  }
} /* END OF MAX-WIDTH 319PX */



/* @media (max-width: 375px) {
  .img-dialogue {
    width: 50%;
    position: absolute;
    left: 20%;
    bottom: 78%;
    z-index: -1;
  }
  .sub-lea-3{
    top: 88px;

  }
} */

@media (min-width:320px) {
  .header-box {
    width: 100vw;
    height: 90vh;
    background-color: #33cccc;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
    position: relative;
  }

  .main-nav {
    display: flex;
    list-style-type: none;
    justify-content: space-around;
    width: 100vw;
    text-align: right;
  }

  .main-nav__link {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffcc;
  }

  .text {
    font-family: Roboto;
    font-weight: bold;
    font-size: 20px;
    color: #ffffcc;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
  }

  .name {
    font-size: 1rem;
    display: block;
    animation-name: moveInLeft;
    animation-duration: 2s;
  }

  .vector-1 {
    position: relative;
    height: 37vh;
  }

  .img-dialogue {
    width: 60%;
    position: absolute;
    left: 20%;
    bottom: 57%;
    z-index: -1;
  }

  .dialogue {
    font-family: Roboto;
    color: #33cccc;
    position: absolute;
    top: 24px;
    left: 55px;
    display: inline-block;
  }

  .img-header {
    width: 60%;
    position: absolute;
    bottom: 9px;
  }

  .trapezoid {
    clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 70%);
    background-color: #33cccc;
    width: 100%;
    height: 50vh;
    position: relative;
    max-width: 100vw;
  }

  .circle {
    clip-path: circle(50% at 50% 50%);
    background-color: #ffffcc;
    width: 160px;
    height: 160px;
    position: absolute;
    top: 65px;
    right: 3px;
  }

  .img-murv {
    position: absolute;
    z-index: 1;
    width: 7.31rem;
    right: 1.56rem;
  }

  .text-2 {
    color: #ffffcc;
  }

  .saluation {
    position: absolute;
    bottom: 28vh;
    font-family: Roboto;
    font-size: 1rem;
    left: 5vw;
  }

  .welcome {
    position: absolute;
    bottom: 23vh;
    font-size: 10vw;
    font-family: Roboto;
    font-weight: bold;
    left: 3vw;
  }

  .img-murv {
    position: absolute;
    z-index: 1;
    width: 12.31rem;
    right: -0.44rem;
  }

  .img-back {
    position: absolute;
    z-index: -1;
    width: 35vw;
  }

  .img-m {
    width: 40vw;
    transform: rotateZ(41deg) translateX(-75px);
  }

  .leading {
    position: relative;
    font-family: Roboto;
    font-weight: bold;
    color: #33cccc;
  }

  .sub-leading__1 {
    position: absolute;
    top: -149px;
    left: 80px;
    font-size: 0.81rem;
  }

  .sub-leading__2 {
    position: absolute;
    top: -22vh;
    font-size: 0.9rem;
    left: 30vw;
  }

  .sub-leading__3 {
    position: absolute;
    top: -14vh;
    left: 18vw;
  }

  .sub-leading__4 {
    position: absolute;
    top: -10vh;
    left: 34vw;
    font-size: 48px;
  }

  .img-m1 {
    position: absolute;
    right: 0;
    width: 25%;
  }

.leading-2{
position: relative;
font-family: Roboto;
color: #33cccc;
}

.sub-lea__1{
  font-size: 8rem;
  font-weight: bold;
}


.sub-lea__2 {
    position: absolute;
    top: 46px;
    font-weight: bold;
}



.sub-lea__3{

    position: absolute;
    top: 74px;
    left: 130px;
    right: 46px;
    font-weight: bold;
    font-size: 12px;
}


.sub-lea__4 {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    bottom: -68px;
    margin-left: 20px;
}

.word-0{
  font-size: 2rem;
}

.word-1{
  font-size: 1.12rem;
}

.sub-lea__5 {
    position: absolute;
    bottom: -119px;
    left: 75px;
    font-weight: bold;
    font-size: 23px;
}

}

@media (min-width:320px) and (min-height:578px) {
  .welcome {
    bottom: 21vh;
    left: 3vw;
  }

  .img-back {
    width: 37vw;
  }

  .saluation {
    bottom: 28vh;
    left: 20vw;
    font-size: 12px;
  }
}

@media (max-width: 375px) {
  .img-dialogue {
    width: 50%;
    position: absolute;
    left: 20%;
    bottom: 78%;
    z-index: -1;
  }

  .img-back {
    width: 43vw;
  }
.sub-lea__3{
      margin-right: 35px;
    }

    .sub-lea__4{
      margin-left: 20px;
margin-right: 20px;
bottom:-80px
    }
}/*end of 375px*/

@media (max-width: 375px) and (max-height:578px) {
  .img-back {
    width: 30vw;
  }
}

@media (max-width:375px) and (min-width:578px) {
  .saluation {
    bottom: 26vh;
    left: 20vw;
  }

  .welcome {
    bottom: 21vh;
    left: 3vw;
  }

  .img-back {
    width: 37vw;
  }
}

@media (min-width:425px) {
  .img-dialogue {
    width: 31%;
    position: absolute;
    left: 20%;
    bottom: 70%;
    z-index: -1;
  }

  .img-header {
    width: 40%;
    position: absolute;
    bottom: 9px;
  }

  .img-back {
    width: 38vw;
  }

  .saluation {
    bottom: 26vh;
    left: 20vw;
  }

  .welcome {
    bottom: 20vh;
  }

  .sub-lea__3{
        margin-right: 53px;
  }
  .sub-lea__4 {
    margin-right: 34px;
}

.sub-leading__1 {
    margin-left: 25px;
}


}

@media (min-width:425px) and (max-height:578px) {
  .img-back {
    width: 30vw;
  }
}

@media (min-width:768px) {
  .main-nav {
    display: flex;
    list-style-type: none;
    justify-content: flex-end;
    width: 100vw;
    text-align: right;
  }

  .main-nav__items {
    margin-right: 2rem;
    margin-top: 1rem;
  }

  .img-header {
    width: 30%;
  }

  .img-dialogue {
    width: 20%;
    left: 10%;
  }

  .text {
    font-size: 2rem;
  }

  .trapezoid {
    clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 70%);
    background-color: #33cccc;
    width: 100%;
    height: 83vh;
    position: relative;
    max-width: 100vw;
  }

  .circle {
    clip-path: circle(50% at 50% 50%);
    background-color: #ffffcc;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 171px;
    right: 3px;
  }

  .saluation {
    position: absolute;
    bottom: 50vh;
    font-family: Roboto;
    font-size: 1.7rem;
    left: 30vw;
  }

  .welcome {
    position: absolute;
    bottom: 31vh;
    font-size: 15vw;
    font-family: Roboto;
    font-weight: bold;
    left: 3vw;
  }

  .img-murv {
    position: absolute;
    z-index: 1;
    width: 20.31rem;
    right: -2.44rem;
  }

  .img-back {
      position: absolute;
      z-index: -1;
      width: 25vw;
      height: 57vh;
  }

  .img-m {
      transform: rotateZ(41deg) translateX(-167px);
  }

  .sub-leading__1 {
      top: -330px;
      left: 218px;
      font-size: 23px;
  }

  .sub-leading__2 {
    top: -52vh;
    font-size: 21px;
    left: 21vw;
    font-weight: 100;
}

}

@media (min-width:768px) and (min-height:1024px) {
  .img-dialogue {
    width: 36%;
    left: 21%;
  }

  .main-nav {
    font-size: 1.4rem;
  }

  .img-header {
    width: 49%;
  }

  .saluation {
    bottom: 41vh;
    left: 30vw;
  }

  .img-murv {
    width: 25.31rem;
    right: -5.44rem;
  }

  .circle {
    top: 299px;
    right: 13px;
  }

  .img-back {
    width: 33vw;
    height: 50vh;
  }
}

@media (min-width:768px) and(min-height:578px) {
  .img-back {
    width: 32vw;
    height: 55vh;
  }
}

Answer 1

用类容器将<p>中包含文本的<div>元素包装起来，并为其提供display: flex;属性。那应该有帮助。

编辑：我还建议您在设计中使用网格系统。类似于Flexbox或CSS Grid或both。这将有助于您在网站上放置文本。它将为您节省很多头痛。

对于媒体查询，我不必担心在查询中指定max-height。只是宽度。我进行响应式设计的方法是使用基于设备屏幕尺寸的分辨率（就像您在iPhone X上所说的那样），然后修复介于两者之间完全损坏的所有内容。像Bootstrap这样的框架可能也会使您受益，因为该框架旨在响应性强，并且可以避免香草html / css带来的麻烦。

Answer 2

请勿使用px并使用“ ems”（例如16px = 1em）作为度量。您可以在https://css-tricks.com/why-ems/

上阅读有关使用px的问题的更多信息。

我应该使用设备工具栏还是增加和减小视口宽度？

2 个答案: