©著作权归作者所有：来自51CTO博客作者朝阳39的原创作品，请联系作者获取转载授权，否则将追究法律责任
为什么移动端需要自适应/适配 ？
因移动端
屏幕尺寸不同屏幕分辨率不同横竖屏移动端自适应/适配方案
【必要】设置 meta 标签
设置页面的宽度等于设备的宽度不允许⽤户⼿动缩放【推荐】viewport
即用 vh vw vmin vmax 单位
为了提升开发效率，通常使用插件实现 px 自动转换为 vw
1. 安装插件插件官网
https://www.npmjs.com/package/postcss-px-to-viewport-8-plugin
以 vite 项目为例，在 vite.config.ts 中
defineConfig 中与 plugins 属性并列添加
启动项目后，可见页面中的 px 都变成了 vw
【已淘汰】css 的媒体查询 @media
需为不同尺寸的屏幕定义相关的样式，代价太高！【有缺陷】rem
相对于根元素的字体⼤⼩自适应变化
缺陷：不同的页面尺寸，需用 CSS 媒体查询 @media 定义不同的根元素的字体⼤⼩
【已过时】flexible
使⽤ js 动态来设置根字体
缺陷：
video 标签的视频频播放器的样式在不同 dpr 的设备上展示差异很⼤安卓⼿机⼀律按 dpr = 1 处理不再兼容 @media 的响应式布局 赞 收藏 评论 举报相关文章
