不看废话可以直接看解决方案 > > > 最终公式
基本概念：
物理像素：
屏幕中真实的发光小灯泡数量
物理像素 = 分辨率 = 设备独立像素 * dpr
设备独立像素
屏幕生产时设定，不可更改。浏览器打开F12，移动端模拟器用的默认都是各个手机型号的设备独立像素大小。
逻辑像素：
1个css像素 等于 1个逻辑像素 等于 1个设备独立像素
分辨率
屏幕中，发光小灯泡的总数，即物理像素
像素比：devicePixelRatio(dpr)
在浏览器中，通过 window.devicePixelRatio 获取
在相同尺寸的屏幕中，有的分辨率大，有的分辨率小，分辨率越大，像素密度越大，像素比越大。
例如：dpr = 2 ， css 中 width：2px; height: 2px; 则： 在真机屏幕上就会有 4*4 个小灯泡发光。
以iPhone 6、6s 为例：
iphone6的设备独立像素是 375 * 667，分辨率(物理像素) 是 750 * 1334，所以它的 dpr 是 2 。
在css中，画一个 width:3px; height:4px; 的矩形，里面的数值是这样的：
逻辑像素(css值)：3 * 4
dpr：2
物理像素：2 * 3 = 6 ；2 * 4 = 8；
所以，在真实设备上，会亮 6 * 8 个小灯泡
移动端布局视口：document.documentElement.clientWidth
早期的移动端浏览器，为了适配PC端页面，不出现滚动条，设计了一个 980px 的容器，来承载PC端的网页。通过等比例缩放这个容器，达到与手机等宽，使手机端不出现滚动条。
手机端页面经过缩放，设备独立像素与逻辑像素的比例不再是一比一，想要铺满整个屏幕，需要设置逻辑像素为980px。
viewport：理想视口宽度，利用meta标签实现
摒弃 980px 的布局视口，使布局视口宽度 === 设备独立像素 === css 像素，
不需要缩放，就能看到网站的全部内容
为移动端设备单独设计一个网站
<meta name="viewport" content="width=device-width"/>
1、width: 布局视口的宽度
2、initial-scale 初始化缩放比例
initial-scale = 设备独立像素/布局视口宽度
3、maximum-scale 允许用户缩放的最大比例
4、minimum-scale 允许用户缩放的最小比例
Safari 不支持
maximum-scale = 设备独立像素/视觉视口宽度
5、user-scalable 是否允许用户缩放
6、viewport-fit 设置为 cover 值 可以解决刘海屏的留白问题
缺点：不同的设备独立像素，同样的css像素，显示的比例不同
解决方法：适配
Rem适配
em：相对于父元素，1em = 1父级容器的 font-size 大小
rem：相对于根元素， 1rem = html 根标签的 font-size 字体大小
假如有两个设备：
苹果6：设备独立像素 375 * 667
苹果4：设备独立像素 320 * 480
假如设置1个css逻辑像素为 1rem，我们希望，同样一个逻辑像素1rem，在两个屏幕上，都占据100%的宽度：
得到公式：1rem = 根字体大小 = 布局视口宽度
根据以上公式，我们可以定义 1rem 在不同设备上，都占据相同的百分比的宽度。这就可以实现适配了，。
动态设置根字体大小，占满屏幕：
先获取当前的 viewport 视口宽度： let clientWidth = document.documentElement.clientWidth
设置根字体大小：document.querySelector('html').style.fontSize = clientWidth
以上，两个设备的根字体大小，分别为 375px 、320px，由于css里面设置了 1rem，
所以，两个设备，一个会渲染 375 个 设备独立像素，一个会渲染 320个 设备独立像素。
而这两个设备的 dpr 都为 2 ，
所以，最终在真机上发光的灯泡，分别是 750 和 640。都占满屏幕。实现了基本的适配。
假如，我们有一个尺寸为 750px 的设计稿，我们想要里面的效果每个手机都适配：
1rem = 根字体大小 = 布局视口宽度 / 750
书写大小 = ( 设计稿元素宽度 / 根字体大小 )rem
假如，我们有一个尺寸为 375px 的设计稿，我们想要里面的效果每个手机都适配：
1rem = 根字体大小 = 布局视口宽度 / 375
书写大小 = ( 设计稿元素宽度 / 根字体大小 )rem
再脑补一下：
假如，布局视口宽度为 375px ，设计稿宽度为 375px
375px / 375px = 1px = 1rem
这公式看似没什么问题，实际上问题很严重。
这里的根字体大小，设置为 1px 。浏览器的字体大小，最小只能设置到 12px。
设置小于12的时候，自动就变成 12px了，这就乱套了，。，。
所以，这里字体大小要乘以100才保险：
公式：
1rem = 根字体大小 = 布局视口宽度 * 100 / 375
代入：
1rem = 100px = 375px * 100 / 375px
假如，设计稿有个矩形，长30px:
width: 30px / 100px * rem;
width: 0.3rem;
width: .3rem;
假如，布局视口宽度为 375px ，设计稿宽度为 750px
公式：
1rem = 根字体大小 = 布局视口宽度 * 100 / 750px
代入：
1rem = 50px = 375px * 100 / 750px
假如设计稿有个矩形，长30px:
750 / 375 * 30 / 100 = .6rem
width: .6rem;
可是，为什么要算得这么辛苦呢，。直接把模拟器的宽度自定义成跟设计稿一样，不是挺舒服的嘛？于是，问题变成这样：
布局视口宽度为750px ，设计稿宽度为 750px ，矩形宽度为 30px
直接 30 / 100 rem = .3rem
因为已经实现了适配，所以，自定义模型，改变布局视口宽度，实际上只是换一个手机型号而已，只不过这个型号更适合开发。
最终公式
1rem = 根字体大小 = 布局视口宽度 * 100 / 设计稿宽度
书写大小 = ( 设计稿元素宽度 / 根字体大小 )rem
function adapter() {
const clientWidth = document.documentElement.clientWidth
document.querySelector('html').style.fontSize = clientWidth * 100 / 设计稿宽度 + 'px'
}
adapter()
// 监听页面刷新，自动变换根字体大小
window.onresize = adapter
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 3rem;
height: 4rem;
background-color: grey;
margin: 0 auto;
}
</style>
<script>
function adapter() {
const clientWidth = document.documentElement.clientWidth
document.querySelector('html').style.fontSize = clientWidth * 100 / 375 + 'px'
}
adapter()
window.onresize = adapter
</script>
</head>
<body>
<div></div>
</body>
</html>
聪明的同学们大概都看明白了，变化的永远只有布局视口宽度，
我们只要保证 不同设备之间，视口宽度 与 根字体大小之间的比例，保持一致，就完成适配了。
通过这个方法，甚至可以实现逻辑像素完全照搬设计稿，也能完成适配，只不过要用一些其它方法，，
我好像写了一个笔记，，---
vue 移动端适配方案 设计稿按 一比一 设置css大小，并实现移动端适配，样式自动添加浏览器前缀
1279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
