如何通过media-query改变div的大小?

Question

我正在制作我的第一个项目，这是一个餐厅网站，我想让我的菜单页面像这里(https://62bc5048ee1d4.site123.me)，but我有问题与它的媒体查询，我不能让它像上面的链接当我的屏幕尺寸低于1000px和768px(特别是1000px)，我怎么做呢?以下是我的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

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

假设你的屏幕是300px;它仍然是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>