html - 我应该使用设备工具栏还是增加和减少视口(viewport)宽度？

Question

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

一切顺利，至少我一开始是这么想的，当时我将视口(viewport)的宽度减小到与之前的宽度相同(我用于设备工具栏的宽度是 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;属性(property)。这应该有所帮助。

编辑:我还建议在您的设计中使用网格系统。类似于 Flexbox或 CSS Grid , 或 both .这将有助于定位您在网站上的文本。它将避免您目前遇到的许多令人头疼的问题。

至于媒体查询，我不会担心指定 max-height在查询中。只是宽度。我对响应式设计的方法是使用基于设备屏幕尺寸的分辨率(就像你对 iPhone X 所说的那样)，然后修复中间完全损坏的任何东西。查看像 Bootstrap 这样的框架也可能对您有所帮助，因为它被设计成响应式的，可以让你避免一些来自 vanilla html/css 的头痛。