HTML元素无法随屏幕尺寸自适应，width:100%设置无效

核心问题原因 #

1. 缺少viewport元标签：移动端浏览器无法正确识别屏幕宽度，导致自适应逻辑失效。
2. 固定像素值滥用：部分元素使用固定宽度（如.box的400px）、固定偏移（如.box的right:350px），无法随屏幕尺寸动态调整。
3. 不必要的边距限制：location h2和footer .footer的margin-left/right:8px导致元素无法占满全屏宽度，出现横向留白。

具体修复步骤 #

1. 添加viewport元标签 #

在HTML的<head>中插入以下代码，确保移动端浏览器正确适配屏幕：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 修复主区域背景图与标题框 #

• 将.titlepic的固定top:83.276px改为相对单位top:5.2rem，避免固定像素值的适配问题。
• 修改.box的布局：
  • 替换width:400px为max-width:90%，保证小屏幕下不溢出；保留width:400px作为大屏下的最大宽度。
  • 移除right:350px，改用padding-left:2rem给.titlepic添加左侧内边距，实现标题框的左对齐布局。
  • 将height:200px改为min-height:200px，允许内容自适应高度。

3. 优化Options模块 #

将.options h2的padding:50px改为相对单位padding:2rem，避免小屏幕下元素过大导致布局错乱；同时给.options添加左右内边距，防止元素贴边。

4. 移除不必要的边距限制 #

• 删除location h2的margin-left:8px和margin-right:8px，使其占满全屏宽度。
• 删除footer .footer的margin-left:8px和margin-right:8px，保证底部黑色条全屏显示。
• 给location img添加width:100%，让地图图片自适应屏幕宽度。

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Brick Brigade</title>
        <link rel="stylesheet" href="./companyhomecss/companyhome.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <div class="title">
                <h1>Bricks Brigade</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Review</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <div class="titlepic1">
                <div class="titlepic">
                    <div class="box">
                        <h2>Find the perfect fit for your house.</h2>
                        <p>Browse our brick selection today!</p>
                        <a href="#">Browse Bricks</a>
                    </div>
                </div>
            </div>
            <div class="options">
                <h2>Bricks</h2>
                <h2>Lumber</h2>
                <h2>Shingles</h2>
            </div>
            <div class="location">
                <h2>Locations</h2>
                <img src="./companyhomepics/GoogleMapTA.webp" alt="Locations">
            </div>
            <footer>
                <div class="footer"></div>
                <ul>
                    <li>Home</li>
                    <li>Contact</li>
                    <li>Shop</li>
                    <li>Leave Review</li>
                </ul>
            </footer>
        </main>
    </body>
</html>

CSS代码 #

/* Universal */
html {font-size: 16px;}
body {margin: 0px; padding: 0px; font-family: 'Source Code Pro', monospace;}

/* Header */
header {background-color: black; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; z-index: 1; border-bottom: 1px solid gray;}
.title {color:whitesmoke; position: relative; left: 2rem; font-size: 1rem;}
nav ul {color: whitesmoke; position: relative; right: 2rem; padding:0;}
nav li {display: inline-block; background-color: gray; padding: 5px 10px; margin-left: 0.5rem;}
nav a {text-decoration: none; color: whitesmoke;}
nav li:hover {background-color: lightgray; color: gray;}
nav a:hover {color: gray;}

 /* Main picture */
 .titlepic1 {width: 100%}
 .titlepic {display: flex; 
    position: relative; 
    top: 5.2rem; 
    background-image: url(../companyhomepics/brickangle.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    min-height: 35rem; 
    width: 100%;
    justify-content: flex-start; 
    align-items: center; 
    border-bottom: 2px solid black; 
    padding-left: 2rem; 
    box-sizing: border-box;}
.titlepic .box {background-color: black; padding: 1rem; min-height: 200px; max-width: 90%; width: 400px;
    border-radius: 5px; border: 2px solid gray; text-align: center;}
.titlepic h2 {color: whitesmoke; margin-top: 2rem;}
.titlepic a {color: whitesmoke; text-decoration: none; background-color: gray; padding: 1.25rem 0.9375rem; display: inline-block; margin-top: 1rem;}
.titlepic a:hover {color: gray; background-color: whitesmoke;}
.titlepic p {color: whitesmoke; }

/* Options */
.options {position: relative; top: 70px; display: flex; justify-content: space-around; padding: 0 1rem; box-sizing: border-box;}
.options h2 {padding: 2rem; background-color: gray; color: white; display: inline-block; border: 2px solid black; margin: 0;}

/* Locations */
.location {position: relative; top: 50px; display: flex; flex-direction: column; }
.location h2 {background-color: black; color: white; padding-left: 25px; padding-right: 25px; margin:0;}
.location img {align-self: center; width: 100%; max-width: 1000px;}

footer {position: relative; top: 60px; padding-bottom: 20px;}
footer .footer {background-color: black; display: block; width: 100%; height: 30px; margin:0;}
footer ul {display: flex; justify-content: center; gap: 2rem; padding:0;}
footer li {list-style: none;}

内容的提问来源于stack exchange，提问作者bkezk