在构建现代网站时，屏幕尺寸的多样性让固定宽度设计不再可行。CSS响应式布局通过一套样式规则，使页面能根据设备视口自动调整结构、字体与间距，从而兼顾手机、平板与桌面体验。
一、视口与基础设置
响应式布局的第一步是在HTML中声明视口。若缺少该声明，移动端浏览器会按桌面宽度渲染并缩放，导致媒体查询失效。通过<meta>标签设置viewport，可让CSS以设备真实宽度为基准。
除了视口声明，全局盒模型建议统一为border-box，避免padding与border撑破容器。同时用相对单位替代px，例如rem基于根字体，百分比基于父级，这样在缩放时整体比例更协调。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box; }
html { font-size: 16px; }
</style>
二、媒体查询的断点设计
媒体查询是响应式核心，它根据width、orientation等条件应用不同样式。断点不应绑定具体设备，而应按内容布局自然转折来划分。常见区间为移动优先的小屏样式，再用min-width向上扩展。
下面示例采用移动优先：默认单列，超过768px转两列，超过1200px限制容器最大宽度。这种写法维护简单，且新增设备时不易冲突。注意避免断点过多，否则样式将难以追踪。
.container {
width: 100%;
padding: 0 12px;
}
/* 平板及以上 */
@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
}
/* 桌面 */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
margin: 0 auto;
}
}
三、弹性布局与相对单位
Flexbox与Grid能替代浮动，实现自适应排列。Flex容器内的项目可用flex属性分配剩余空间，配合flex-wrap在窄屏自动换行。Grid则适合二维结构，用fr单位做弹性分栏。
相对单位方面，rem适合字体与间距，vw/vh适合全屏区块。但vw在字体上可能引发无障碍问题，建议用clamp()限定区间。如下代码让标题在320px到1200px间平滑缩放，最小18px最大32px。
.title {
font-size: clamp(18px, 4vw, 32px);
}
.flex-box {
display: flex;
flex-wrap: wrap;
}
.flex-box > div {
flex: 1 1 200px;
}
四、图片与媒体自适应
图片常是布局溢出源头。应给img设置max-width:100%与height:auto，使其不超出父容器。对于高分辨率屏，可用srcset提供多倍图，浏览器按条件选取，节省流量。
视频与iframe也需外层包裹器用padding-top百分比实现固定宽高比。以下封装可让嵌入内容保持16比9，且宽度随容器变化，避免滚动条出现。
img {
max-width: 100%;
height: auto;
}
.ratio-box {
position: relative;
padding-top: 56.25%;
}
.ratio-box iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
五、调试与常见误区
开发者常误把媒体查询写成max-width向下覆盖，造成样式优先级混乱。移动优先的min-width写法层级更清晰。另一误区是隐藏内容而非重排，这会让小屏缺失信息。
调试时可用浏览器设备模拟器观察断点切换，同时真机测试触摸与滚动。若某断点样式不生效，先检查viewport与选择器权重，再确认是否存在未转义的HTML标签名称干扰解析。
/* 不推荐：大屏覆盖小屏易冲突 */
.box { width: 100%; }
@media (max-width: 768px) {
.box { width: 50%; }
}
/* 推荐：移动优先 */
.box { width: 100%; }
@media (min-width: 768px) {
.box { width: 50%; }
}