移动端适配需设置视口元标签，利用@media查询配合断点（如768px）调整样式，使用rem、em、百分比等相对单位，并结合Flex与Grid布局实现响应式设计。
在现代网页开发中，移动端适配是必不可少的一环。CSS 通过 @media queries 实现响应式布局，让网页能根据不同设备的屏幕宽度自动调整样式，从而保证在手机、平板和桌面端都有良好的显示效果。
理解视口与媒体查询基础
为了让页面在移动设备上正确缩放，首先要在 HTML 的 中设置视口（viewport）元标签：
这句代码告诉浏览器：页面宽度应等于设备屏幕宽度，初始缩放比例为1，避免移动端默认的缩小显示。
@media 查询则根据当前屏幕宽度应用不同的 CSS 样式。语法如下：
立即学习“前端免费学习笔记（深入）”；
@media screen and (max-width: 768px) { /* 当屏幕宽度小于等于768px时生效 */ body { font-size: 14px; } }常用断点设置移动端适配
实际开发中，通常根据常见设备宽度设定几个关键断点（breakpoints），例如：
- 手机竖屏：max-width: 480px 或 576px
- 平板：min-width: 768px 且 max-width: 1024px
- 桌面端：min-width: 1025px
示例：让导航栏在小屏幕上变为垂直堆叠：
.nav { display: flex; }
@media (max-width: 768px) {
.nav { flex-direction: column; }
.nav-item { text-align: center; padding: 10px; }
}
使用相对单位提升适配灵活性
仅靠 media query 不够，还需配合相对单位增强弹性。推荐使用：
- rem：相对于根元素（html）字体大小，便于统一控制整体尺寸
- em：相对于父元素字体大小，适合局部缩放
- % 和 vw/vh：宽度用百分比或视窗单位，实现流体布局
比如设置根字体：
html { font-size: 16px; } @media (max-width: 480px) { html { font-size: 14px; } }结合 Flex 与 Grid 实现弹性布局
现代布局方式如 Flexbox 和 CSS Grid 天然支持响应式。配合 media query 可快速调整结构。
例如，在大屏用两列布局，小屏自动变为单列：
.container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }@media (max-width: 600px) {
.container { grid-template-columns: 1fr; }
}
基本上就这些。合理使用 media queries，配合视口设置、相对单位和现代布局，就能高效实现移动端适配，不复杂但容易忽略细节。
