使用viewport标签、弹性布局、媒体查询和相对单位可实现移动端响应式设计，确保页面在不同设备上良好显示。
实现移动端响应式布局，核心是让页面在不同尺寸的设备上都能良好显示。CSS 提供了多种方式来适配移动设备，下面介绍几种实用且常用的方法。
使用视口（viewport）元标签
在 HTML 的 <head> 中添加 viewport 标签，是响应式设计的第一步。它告诉浏览器如何控制页面的尺寸和缩放。
例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码确保页面宽度等于设备屏幕宽度，并设置初始缩放比例为1，避免在手机上显示过小或被自动缩放。
立即学习“前端免费学习笔记（深入）”；
采用弹性布局（Flexbox）
Flexbox 能让容器内的子元素自动调整大小和位置，非常适合构建响应式结构。
比如创建一个在不同屏幕下自动换行的导航栏：
.nav-container {<br>
display: flex;<br>
flex-wrap: wrap;<br>
justify-content: space-around;<br>
}
当屏幕变窄时，导航项会自动换行排列，不会溢出容器。
使用 CSS 媒体查询（Media Queries）
媒体查询可以根据设备特性（如屏幕宽度）应用不同的样式规则。
例如，为手机、平板和桌面设置不同布局：
@media (max-width: 480px) {<br>
.column { width: 100%; }<br>
}
@media (min-width: 481px) and (max-width: 768px) {<br>
.column { width: 50%; }<br>
}
@media (min-width: 769px) {<br>
.column { width: 25%; }<br>
}
这样可以让内容在小屏幕上堆叠，在大屏幕上并排显示。
使用相对单位代替固定像素
避免使用 px 定义宽度、字体大小等，改用更灵活的单位：
- rem：相对于根元素字体大小，适合全局统一缩放
- em：相对于父元素字体大小，适合局部调整
- %：相对于父容器，适合宽度布局
- vw / vh：视窗宽度/高度的百分比，适合全屏元素
例如：
font-size: 1.2rem;或
width: 90%;能更好适应不同屏幕。
基本上就这些。结合 viewport、弹性布局、媒体查询和相对单位，就能构建出稳定可靠的移动端响应式页面。关键是提前规划断点，并在真实设备上测试效果。
