如何通过Media Query调整Div尺寸？餐厅菜单页面响应式适配求助

云原生阿岚

2026-8-26

餐厅网站菜单页面响应式适配问题（1000px及768px断点）

我正在做第一个项目——餐厅网站，想让菜单页面达到目标效果，但用Media Query做适配时遇到了问题：屏幕尺寸小于1000px和768px（尤其是1000px）时，没法实现预期布局。

我的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>

问题分析与修复方案

你的代码核心问题是混合使用float与flex布局、固定宽高/定位导致小屏幕溢出、断点规则未覆盖原始样式，以下是针对性修复：

修复后的CSS代码

/* 统一用flex布局替代float，避免排版冲突 */
#part3{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-bottom:100px;
    background-color:white;
}

#part3 .container {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

.menu-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin-top: 30px;
}

#S1, #S2 {
    flex: 1;
    min-width: 300px;
    padding: 0;
}

.menu-h2{
    text-align:center;
    margin-bottom: 20px;
}

/* 统一菜单盒子样式，去掉冗余的menu-box2 */
.menu-box {
    background-color:#f1f1f1;
    width: 100%;
    padding:15px;
    padding-bottom:50px;
    margin-bottom:20px;
    overflow: hidden;
}

.menu-img{
    float: left;
    padding: 0 20px 20px 0;
    width: 100%;
    max-width: 255px;
    height: auto;
}

/* 断点适配调整 */
@media all and (max-width:1200px) {
    .topper-header{font-size:240%;}

    .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%;text-align: center;}

    #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;}
    #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%;}

    .menu-row {
        gap: 20px;
    }
}

@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:flex;flex-wrap: wrap;justify-content: center;width:100%;}
    .blog-image{width:100%; height:auto;}
    .box1 p{float:none;}

    /* 762px下改为单列布局 */
    .menu-row {
        flex-direction: column;
        align-items: center;
    }
    #S1, #S2 {
        max-width: 500px;
    }
}

对应的HTML调整

<section id="part3">
    <div class="container">
        <h1 class="topper-header">RESTAURANT MENU</h1>
        <div class="menu-row">
            <div id="S1">
                <h2 class="menu-h2">Main Menu</h2>
                <div class="menu-box">
                    <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-box">
                    <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-box">
                    <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-box">
                    <img class="menu-img" src="images/second1.jpg" width='255' height="170"/>
                    <h2>Dessert Name</h2>
                    <p>描述内容</p>
                    <span class="price">$ 31,99</span>
                </div>
                <div class="menu-box">
                    <img class="menu-img" src="images/second2.jpg" width='255' height="170"/>
                    <h2>Dessert Name</h2>
                    <p>描述内容</p>
                    <span class="price">$ 31,99</span>
                </div>
                <div class="menu-box">
                    <img class="menu-img" src="images/second3.jpg" width='255' height="170"/>
                    <h2>Dessert Name</h2>
                    <p>描述内容</p>
                    <span class="price">$ 31,99</span>
                </div>
            </div>
        </div>
    </div>
</section>

核心修复点

用flex布局统一控制菜单行列排版，移除float避免冲突
取消菜单盒子的固定宽高与相对定位，改为自适应父容器
断点处明确布局规则：1000px保持两列、762px切换为单列
用gap替代padding控制间距，图片改为高度自适应避免拉伸

内容的提问来源于stack exchange，提问作者Count of Monte Cristo

如何通过Media Query调整Div尺寸？餐厅菜单页面响应式适配求助

我的CSS代码 #

我的HTML代码 #

问题分析与修复方案 #

修复后的CSS代码 #

对应的HTML调整 #