一篇真正教会你开发移动端页面的文章
大字标明，下面的链接是大神的博客，是我看过最详尽、最透彻讲解移动端页面开发的好文章
mark一下，放在自己的日志里面更容易以后查找
搬运一下结论
rem布局的两种方案
1.淘宝方案
step1 设置缩放（dpr的倒数），让布局视口===设备宽度
let scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name=viewport]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
step2 把设备宽度10等分，设置html的font-size,即1rem
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
step3 计算元素的rem宽度，以200px为例
元素rem宽度 = 200px / 上一步的根元素字体大小
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="" />
</head>
<body>
<script>
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
</script>
</body>
</html>
2.网易方案
思路：（以iphone6为例）不缩放，保留理想的布局视口像素(375px)和设备像素(750px)之间的差距，即dpr
将设计图按1rem = 100px分割，以750px的设计图为例，宽度是7.5rem;
令实际布局视口的宽度也为7.5rem，但布局视口与设备像素是有差距的，所以布局视口中，1rem !== 100px，需要动态计算
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
即布局视口的1rem = document.documentElement.clientWidth / 7.5 + 'px';
当我们根据设计图写页面的时候，元素rem宽度 = 元素的设计图尺寸 / 100px
比如200px即为2rem
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
</body>
</html>
PS：
公式成立的大前提：（缩放比例为1）
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
布局视口的宽度：document.documentElement.clientWidth
字体不要用rem 用媒体查询
更新：安卓4.4以上可以使用vw vh
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
2016-09-07 正则实现千分符
2016-09-07 获取鼠标的当前位置