如何通过媒体查询更改div的大小？

Question

我正在做我的第一个项目，它是一个餐厅网站，我想让我的菜单页面像这里(https://62bc5048ee1d4.site123.me)一样，但是我在它的媒体查询上遇到了麻烦，当我的屏幕尺寸小于1000 is和768 is(特别是1000 is)时，我不能像它那样链接到上面。下面是我的html和css代码：

#part3{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom:100px;
    background-color:white;
}

#S1{
    float:left;
    padding-right:140px;
    padding-left:150px;
}

#S2{
    padding-left:150px;
    float:left;
    padding-right:140px;
}

.menu-h2{
    text-align:center;
}

.menu-box1{
    position:relative;
    left:-130px;
    background-color:#f1f1f1;
    width:175%;
    padding:10px;
    padding-bottom:50px;
    margin-bottom:20px;
}

.menu-img{
    float: left;
    padding: 0 20px 20px 0;
}

.menu-box2{
    position:relative;
    left:-130px;
    background-color:#f1f1f1;
    width:175%;
    padding:10px;
    padding-bottom:50px;
    margin-bottom:20px;
}


   @media all and (max-width:1200px) {
    .topper-header{font-size:240%;}

    #S1{width:100%;padding-right:10px;margin-left:-10px;}
    #S2{width:100%;padding-right:10px;margin-left:-10px;}
    .menu-h2{margin-left:-250px;}


    .blog-image{width:230px; height:150px;}
    .box1 h3{font-size:16px;}
    .box1 p{padding-bottom:0;font-size:15px;}

    #part1 p{font-size:100%;}
    #about-image{width:500px; height:440px;}

    .text-image1{font-size:60px;}
    .text-image2{font-size:25px;}
}

@media all and (max-width:1000px) {
    .topper-header{font-size:170%;width: 100%;}

    #about-image{width:350px; height:420px;}
    #part1 p{font-size:90%;width:25%;height:65%;margin-top:-5px;}

    .box1{width:40%;float: none;}
    .blog-image{width:100%; height:250px;padding-bottom:5px;}
    .box1 li{margin-top:-8px;font-size:15px;}
    .box1:nth-child(odd) {margin-left: 1rem /*or other value*/;}
    #special {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;}

    #part4{padding:50px;}
    #spec-2{flex-direction:column;}
    .contact-info{margin-bottom:40px;}
    .contact-info{width:100%;}
    .contact-form{width:90%;}

    #S1{width:50%;padding-right:10px;margin-left:30px;margin-right:30px;display: flex;flex-direction: column;justify-content: center;}
    #S2{width:50%;padding-right:10px;margin-left:30px;display: flex;flex-direction: column;justify-content: center;}
    .menu-h2{margin-left:0px;}
}

@media all and (max-width:861px) {
    #part1 p{font-size:90%;width:30%;height:65%;margin-top:-5px;}
}

@media all and (max-width:762px) {
    .about-center{flex-direction:column;}
    #part1 p{width:85%;padding-bottom:200px;}
    #about-image{width:100%; height:420px;}

    #special {display:table;align-content: center;float:none;width:50%;}
    .blog-image{width:370px; height:270px;}
    .box1 p{float:left;}
}

和html：

   <section id="part3">
         <div class="container">
             <h1 class="topper-header">RESTAURANT MENU</h1>
             <div id="S1">
                 <h2 class="menu-h2">Main Menu</h2>
                 <div class="menu-box1">
                     <img class="menu-img" src="images/first1.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span class="price">$ 31,99</span>
                 </div>
                 <div class="menu-box1">
                     <img class="menu-img" src="images/first2.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span class="price">$ 31,99</span>
                 </div>
                 <div class="menu-box1">
                     <img class="menu-img" src="images/first3.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span class="price">$ 31,99</span>
                 </div>
             </div>

             <div id="S2">
                 <h2 class="menu-h2">Desserts</h2>
                 <div class="menu-box2">
                     <img class="menu-img" src="images/second1.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span class="price">$ 31,99</span>
                 </div>
                 <div class="menu-box2">
                     <img class="menu-img" src="images/second2.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span class="price">$ 31,99</span>
                 </div>
                 <div class="menu-box2">
                     <img class="menu-img" src="images/second3.jpg" width='255' height="170"/>
                     <h2>Pasta</h2>
                     <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
                     <span class="price">$ 31,99</span>
                 </div>
             </div>
         </div>
     </section>

Answer 1

当您编写最大宽度查询时，它总是与第一个描述匹配。

假设您的屏幕是300 is；它仍然是有效的屏幕fir max-width:1200px。

要修复它，请按该顺序使用下面的那些。

  @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }

Answer 2

我对你的html和css代码做了很多修改，我希望你能在下面检查一下。

​

#part3 {
  padding-bottom: 100px;
  background-color: white;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    width: 1320px;
  }
}

#part3 .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

#S1 {}

#S2 {}

.menu-h2 {
  text-align: center;
}

.menu-box1,
.menu-box2 {
  position: relative;
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

.menu-img {
  width: 255px;
}

.price {
  text-align: center;
  display: block;
}

<section id="part3">
  <h1 class="topper-header">RESTAURANT MENU</h1>
  <div class="container">
    <div id="S1">
      <h2 class="menu-h2">Main Menu</h2>
      <div class="menu-box1">
        <img class="menu-img" src="images/first1.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span class="price">$ 31,99</span>
        </div>
      </div>
      <div class="menu-box1">
        <img class="menu-img" src="images/first2.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span class="price">$ 31,99</span>
        </div>
      </div>
      <div class="menu-box1">
        <img class="menu-img" src="images/first3.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span class="price">$ 31,99</span>
        </div>
      </div>
    </div>
    <div id="S2">
      <h2 class="menu-h2">Desserts</h2>
      <div class="menu-box2">
        <img class="menu-img" src="images/second1.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span class="price">$ 31,99</span>
        </div>
      </div>
      <div class="menu-box2">
        <img class="menu-img" src="images/second2.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span class="price">$ 31,99</span>
        </div>
      </div>
      <div class="menu-box2">
        <img class="menu-img" src="images/second3.jpg" />
        <div claa="box-text">
          <h2>Pasta</h2>
          <p>Pasta with sheep's milk ricotta,</br> spinach, tomato sauce and basil</p>
          <span class="price">$ 31,99</span>
        </div>
      </div>
    </div>
  </div>
</section>

​