移动端适配需以viewport为基础，结合rem弹性布局、flex/flexible布局实现自适应，通过媒体查询微调不同屏幕样式，并使用响应式图片优化资源加载，综合运用可覆盖多数场景。
移动端适配是html5开发中的关键环节，目的是让网页在不同尺寸和分辨率的移动设备上都能正常显示、操作流畅。以下是几种主流且实用的html5移动端适配方案。
1. 使用 viewport 元标签
viewport 是移动端适配的基础。通过设置 viewport，可以让页面宽度适配设备屏幕，避免默认以PC视图渲染。
常用代码：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
- width=device-width：使页面宽度等于设备屏幕宽度
- initial-scale=1.0：初始缩放比例为1，不缩放
- user-scalable=no：禁止用户手动缩放（可选）
这个设置能确保页面在各种手机上以正确比例展示，是所有移动端页面的标配。
立即学习“前端免费学习笔记（深入）”；
2. 使用 rem 单位进行弹性布局
rem 是相对于根元素（html）字体大小的单位，通过动态调整 html 的 font-size，可以实现整体布局的等比缩放。
常见做法是：根据设计稿宽度（如750px）和设备宽度，动态计算 html 字体大小。
示例脚本：
<script>
function setRem() {
const designWidth = 750; // 设计稿宽度
const html = document.documentElement;
const width = html.clientWidth;
html.style.fontSize = (width / designWidth) * 100 + ‘px’;
}
window.addEventListener(‘resize’, setRem);
setRem();
</script>
之后在css中使用 rem 单位（如 font-size: 0.32rem; margin: 0.2rem;），页面就能在不同设备上等比缩放。
3. 使用 flexible 布局或 CSS Grid
采用 flex 弹性布局可以轻松实现元素的自适应排列，适合处理不确定宽度的容器。
示例：
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
flex 布局无需计算具体像素，自动分配空间，特别适合导航栏、卡片列表等结构。
4. 媒体查询（Media Queries）针对性调整
对于特殊设备或断点，可以通过媒体查询单独设置样式。
例如：
@media screen and (max-width: 375px) {
.header { font-size: 16px; }
}
@media screen and (min-width: 768px) {
.sidebar { display: block; }
}
结合 rem 和媒体查询，可以在不同区间微调体验。
5. 图片与资源适配
使用响应式图片，避免高清屏出现模糊或低清屏加载过大资源。
- 使用 srcset 提供多倍图：
<img src=”small.jpg” srcset=”large.jpg 2x” alt=””> - 使用 picture 标签适配不同屏幕尺寸
- 背景图用 CSS media query 分别加载
基本上就这些。一套有效的移动端适配通常是 viewport + rem + flex + 媒体查询组合使用，再配合响应式资源处理，就能覆盖大多数场景。关键是根据项目需求选择合适粒度的方案，不必过度复杂化。