移动端浏览器适配经过漫长的迭代，经历了以下的技术方案。
媒体查询
通过使用媒体查询，根据设备的屏幕尺寸、分辨率等媒体特性来调整布局和样式。比如bootstrap，或者jqueryUI，，这种方式维护成本高。
实际应用
在实际应用中，我们可以根据不同的设备屏幕尺寸，使用媒体查询来加载不同的css文件。比如：
// 小屏幕设备（横向手机，宽度 576px 及以上）
@media (min-width: 576px) { }
// 中等屏幕设备（平板，宽度 768px 及以上）
@media (min-width: 768px) { }
// 大屏幕设备（桌面端，宽度 992px 及以上）
@media (min-width: 992px) { }Rem 布局适配
rem是css3新引入的单位，是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适。
实际应用
lib-flexible + postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系开源的一个库，用于设置font-size，同时处理一些窗口缩放的问题。在pc端会有兼容性的问题，对移动端比较友好。
// 引入lib-flexible
import 'lib-flexible'
// 引入postcss-pxtorem
import postcssPxToRem from 'postcss-pxtorem'
// 配置postcss-pxtorem插件
postcss.config({
plugins: [
postcssPxToRem({
rootValue: 16, // 1rem的大小，根据设计稿的字体大小来设置
propList: ['*'], // 要转换的属性，* 表示所有属性
}),
],
})设置viewport进行缩放
在html页面中，使用meta标签来设置viewport，以控制网页在不同设备上的缩放行为。
实际应用
<meta name="viewport" content="width=device-width, initial-scale=1.0">在上述代码中，width=device-width表示将viewport 的宽度设置为设备的宽度，以实现响应式布局。initial-scale=1.0表示初始缩放比例为 1.0，即不进行缩放。 你可以根据需要调整initial-scale的值来控制网页的初始缩放比例。例如，将其设置为initial-scale=1.2将使网页在加载时放大 20%。
注意
请注意，不同的设备和浏览器可能对 viewport 设置有不同的支持和默认行为。
viewport的各个属性介绍如下：
| 属性 | 含义 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| maximum-sacle | 允许用户的最大缩放值，为一个数字，可以带小数 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
Vw 布局适配
vw和vh是viewport单位，它们是基于视窗（viewport）宽度和高度的相对单位。vw表示相对于视窗宽度的百分比，而vh表示相对于视窗高度的百分比。常用技术方案：postcss-px-to-viewport 需要考虑浏览器兼容性。
实际应用
// 引入postcss-px-to-viewport插件
import postcssPxToViewport from 'postcss-px-to-viewport'
// 配置postcss-px-to-viewport插件
postcss.config({
plugins: [
postcssPxToViewport({
rootValue: 16, // 1vw的大小，根据设计稿的字体大小来设置
propList: ['*'], // 要转换的属性，* 表示所有属性
}),
],
})px + calc + clamp 布局适配
根据 CSS 的新特性：css变量、calc()函数、clamp()、@container函数实现
实际应用
:root {
--design-width: 750; // 设计宽度
--viewport-width: 100vw; // vw宽度
--min-viewport-width: 320px; // 最小宽度
--max-viewport-width: 1440px; // 最大宽度
--current-viewport-width: clamp( var(--min-viewport-width), var(--viewport-width), var(--max-viewport-width) ); // 当前宽度
--width-ratio: calc(var(--current-viewport-width) / var(--design-width)); // 当前宽度/设计宽度
}
body {
font-size: calc( 20 * --width-ratio);
}推荐rem + vw 布局适配
- 固定vieport，元素布局上使用rem单位
- html元素的font-size使用vw + px fallback的形式 列如：京东
- 当页面超过一定宽度时，根据media query设置font-size为px，优先级高于vw。
- 限制页面宽度为1080px