响应式布局通过媒体查询和百分比布局实现多设备适配。首先使用min-width设置移动端优先的断点，如768px以上适配平板，1024px以上适配桌面；其次采用百分比宽度替代固定像素，结合box-sizing: border-box确保元素弹性伸缩；再配合Flexbox布局，在不同屏幕下动态调整排列方式，如小屏垂直堆叠、大屏水平分布；最终通过流动布局与条件样式的思维构建自适应页面。
响应式布局是现代网页设计的核心，它让页面在不同设备上都能良好显示。实现响应式的关键在于灵活运用CSS中的媒体查询（media queries）和百分比布局。下面介绍这两种技术的实用技巧。
使用媒体查询适配不同屏幕尺寸
媒体查询允许你根据设备特性（如屏幕宽度、高度、方向等）应用不同的样式规则。最常用的是基于视口宽度设置断点。
例如，为手机、平板和桌面设备分别设置样式：
/* 手机默认样式 */
.container {
width: 100%;
padding: 10px;
}
<p>/<em> 平板：屏幕宽度 >= 768px </em>/
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}</p><p>/<em> 桌面：屏幕宽度 >= 1024px </em>/
@media (min-width: 1024px) {
.container {
width: 980px;
}
}</p>常见断点参考：
立即学习“前端免费学习笔记（深入）”；
- 手机：小于 768px
- 平板：768px - 1023px
- 桌面：1024px 及以上
建议使用 min-width 而非 max-width，这样样式会从移动端向上叠加，更符合移动优先的设计理念。
使用百分比布局提升弹性
固定像素布局在不同屏幕下容易出现横向滚动或留白过多的问题。使用百分比可以让元素按容器比例伸缩。
例如，创建一个两栏布局：
.sidebar {
width: 30%;
float: left;
}
<p>.main-content {
width: 70%;
float: right;
}</p>关键细节：
- 确保父容器有明确宽度（如100%），否则百分比无效
- 避免给百分比元素设置过大的固定边距，可用相对单位如em或rem
- 结合 box-sizing: border-box; 让内边距和边框包含在宽度内，防止溢出
结合flexbox与媒体查询增强布局灵活性
现代布局推荐使用 Flexbox 配合媒体查询，减少对浮动的依赖。
示例：一个在小屏堆叠、大屏并排的卡片布局
.card-container {
display: flex;
flex-direction: column;
gap: 10px;
}
<p>@media (min-width: 768px) {
.card-container {
flex-direction: row;
}
}</p><p>.card {
flex: 1;
}</p>这样在小屏幕上卡片垂直排列，达到平板宽度后自动变为水平分布，无需清除浮动或计算具体像素。
基本上就这些，掌握媒体查询和百分比布局，再配合现代CSS工具，就能构建出适应各种设备的页面。关键是理解“流动”和“条件样式”的思维，而不是死记代码。
