为什么移动端需要自适应/适配 ？
因移动端
- 屏幕尺寸不同
- 屏幕分辨率不同
- 横竖屏
移动端自适应/适配方案
【必要】设置 meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- 设置页面的宽度等于设备的宽度
- 不允许⽤户⼿动缩放
【推荐】viewport
即用 vh vw vmin vmax 单位
为了提升开发效率，通常使用插件实现 px 自动转换为 vw
1. 安装插件
npm install postcss-px-to-viewport-8-plugin -D
插件官网
https://www.npmjs.com/package/postcss-px-to-viewport-8-plugin
2. 添加配置
以 vite 项目为例，在 vite.config.ts 中
import postcsspxtoviewport8plugin from "postcss-px-to-viewport-8-plugin";
defineConfig 中与 plugins 属性并列添加
css: {postcss: {plugins: [postcsspxtoviewport8plugin({unitToConvert: "px",viewportWidth: (file) => {let num = 1920;if (file.indexOf("m_") !== -1) {num = 375;}return num;},unitPrecision: 5, // 单位转换后保留的精度propList: ["*"], // 能转化为vw的属性列表viewportUnit: "vw", // 希望使用的视口单位fontViewportUnit: "vw", // 字体使用的视口单位selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换mediaQuery: true, // 媒体查询里的单位是否需要转换单位replace: true, // 是否直接更换属性值，而不添加备用属性exclude: [/node_modules\/ant-design-vue/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件include: [], // 如果设置了include，那将只有匹配到的文件才会被转换landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)landscapeUnit: "vw", // 横屏时使用的单位landscapeWidth: 1024, // 横屏时使用的视口宽度}),],},},
启动项目后，可见页面中的 px 都变成了 vw
【已淘汰】css 的媒体查询 @media
- 需为不同尺寸的屏幕定义相关的样式，代价太高！
@media only screen and (min-width: 375px) {.logo {width : 62.5px;}
}
@media only screen and (min-width: 360px) {.logo {width : 60px;}
}
@media only screen and (min-width: 320px) {.logo {width : 53.3333px;}
}
【有缺陷】rem
相对于根元素的字体⼤⼩自适应变化
缺陷：不同的页面尺寸，需用 CSS 媒体查询 @media 定义不同的根元素的字体⼤⼩
@media only screen and (min-width: 375px) {html {font-size : 375px;}
}
@media only screen and (min-width: 360px) {html {font-size : 360px;}
}
@media only screen and (min-width: 320px) {html {font-size : 320px;}
}
【已过时】flexible
使⽤ js 动态来设置根字体
缺陷：
- video 标签的视频频播放器的样式在不同 dpr 的设备上展示差异很⼤
- 安卓⼿机⼀律按 dpr = 1 处理
- 不再兼容 @media 的响应式布局