响应式布局通过CSS选择器与媒体查询结合，根据屏幕尺寸、方向和分辨率调整样式。首先定义默认移动端样式，再利用@media (min-width)设置平板（768px）、桌面（992px）和大桌面（1200px）断点，实现容器宽度、布局方向（如flex列转行）、字体大小及元素显隐（如导航链接）的自适应控制；同时可基于orientation: landscape优化横屏显示，或通过min-resolution为高DPI设备加载高清图片，从而在不修改HTML结构的前提下提升多设备用户体验。
在现代网页开发中，响应式布局是确保网站在不同设备上正常显示的关键。通过将CSS选择器与媒体查询结合使用，可以实现根据不同屏幕尺寸加载特定样式的效果，从而提升用户体验。
使用媒体查询控制样式生效条件
媒体查询（@media）允许你根据设备特性（如视口宽度、高度、分辨率等）来应用不同的CSS规则。最常见的用法是基于屏幕宽度切换布局。
例如，为手机、平板和桌面设备分别设置样式：
/* 默认样式：手机端 */
.container {
width: 100%;
padding: 10px;
}
/ 平板：768px 及以上 /
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/ 桌面：992px 及以上 /
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/ 大桌面：1200px 及以上 /
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
结合CSS选择器实现更精确的控制
你可以将媒体查询与具体的选择器结合，针对特定元素在不同屏幕下调整样式。比如隐藏或显示某些内容，或改变布局结构。
立即学习“前端免费学习笔记（深入）”；
常见应用场景包括：
- 隐藏非关键元素：在小屏幕上隐藏侧边栏或次要按钮
- 调整字体大小：移动端使用较小字号，大屏使用更大标题
- 改变布局方向：从垂直排列变为水平排列
/* 小屏幕下隐藏导航中的“帮助”链接 */
.nav-help {
display: none;
}
@media (min-width: 768px) {
.nav-help {
display: inline;
}
}
/ 移动端图片堆叠，桌面端并排 /
.image-grid {
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
.image-grid {
flex-direction: row;
}
}
使用设备特性优化加载效果
除了宽度，还可以根据设备像素比、屏幕方向等条件加载不同样式。
例如，适配横屏手机或高分辨率屏幕：
/* 横屏时调整布局 */
@media (orientation: landscape) {
.mobile-banner {
font-size: 14px;
padding: 5px;
}
}
/ 高DPI屏幕使用更清晰的背景图 /
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.hero-section {
background-image: url('bg-2x.jpg');
}
}
通过合理组合CSS选择器与媒体查询，可以在不改变HTML结构的前提下，让页面自动适应各种设备。关键是定义清晰的断点，并针对不同场景优化视觉呈现。基本上就这些，掌握好就能做出流畅的响应式界面。
