内容不断更新中，可能存在知识点错误，欢迎指正
先来看一些概念：
CSS相对长度单位：
- px,像素
- em,元素的字体高度
- %,百分比
- rem,根元素的font-size
- vm,视窗宽度，1vw=视窗宽度的1%
- vh,视窗高度，1vh=视窗高度的1%
CSS像素px:
CSS像素的单位也叫做px。它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！
- 为了保证阅读体验一致，CSS可以自动在不同设备之间可以调节。即一份代码可以在不同的大小的设备之间显示，并且可以保证阅读体验一致。
- 默认情况下一个CSS像素应该是等于一个物理像素的宽度。
- 但是在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕会看起来更精细清晰一些。
- 在浏览器上通过ctrl +/-可以扩大缩小屏幕，其实就是屏幕分辩率的调低/调高。ctrl +屏幕放大，分辨率降低。
- iPhone6,7,8都是两倍屏手机，即一个CSS像素等于2物理像素。iPhone6Plus等是三倍屏手机，一个CSS像素等于3物理像素。
- 如果我们要以px写，iPhone6为例，设计稿给出一个图片宽高为40px✖️40px。在实际开发中要除以2，宽高要写成20px✖️20px。因为iPhone6是两倍屏手机。
- 早些年开发和UI设计上沟通的问题主要是因为那时都是px的解决方案，需要把尺寸除以2。
实际开发中设计师可能会给我们两种稿，一种是375的iphone6一倍稿，一种是750的web两倍稿。
1、 首先我为什么没有打单位，原因是这里面像素的概念非常多，其实有些连培训出来的UI都搞不清楚，因为前端如何做的适配他们并不会知道，他们只需要关注尺寸和倍数。
2、 首先科普几个概念，像素中比较重要的，逻辑像素pt，物理像素px(pt和px的关系就是1pt里面有几个物理像素点)和viewport像素(浏览器内部对逻辑像素进行再处理的结果，即css中的px，默认css的1px即1物理像素，但会随着设备变化而变化)。逻辑像素和物理像素的比值就是dpr倍，就是常说的几倍图。
3、 蓝湖上传设计稿时，假设设计师在750的稿上做的设计，他上传的时候会选择ios@2x来进行上传。这时开发打开蓝湖看到的ios尺寸是375pt逻辑像素，依旧是1倍图的样子。我们打开像素选择，会变成750px，这时蓝湖中表示的px其实就是物理像素。
4、 但如果设计师上传的375的设计稿，他上传的时候会选择ios@1x来进行上传，这时开发打开蓝湖看到的尺寸还是1倍图的样子。我们打开像素选择，是375px，这时的px依旧是物理像素的概念，但如果要使用必须像素✖️2，蓝湖会帮我们转化，设置一下。（因为iphone6设备他的逻辑像素就是375✖️667，但是他的物理像素就是750✖️1334）
5、 web开发时，前端开发时如何做不同尺寸手机间的一个等比例缩放呢，本人未接触过IOS开发，当前只考虑web项目和小程序项目，采用对应的rem和rpx，且viewport width=device-width。(viewport width=device-width是什么意思，其实就是让设备的物理宽度等于页面宽度)
6、 后面会介绍全局Css vw/vh方式。
一、WEB端，rem和flex配合方案
其实我们会纳闷，比如拿到设计师的两倍图，假如把所有对应的px尺寸/2应用到750px/2宽的移动端页面的css中，结果会如何？其实也是会实现缩放适应的，因为css中的px也是一个相对长度单位，是根据物理像素/逻辑像素的值变化而变化的一个值。（后面我们可以试验一下）
但是我们今天介绍的是用rem来配合flex实现。
- rem布局很是简单，其基本原理就是根据屏幕不一样的分辨率,动态修改根字体的大小,让全部的用rem单位的元素跟着屏幕尺寸一块儿缩放,从而达到自适应的效果。
- 设计稿是按照iphone6来设计的（iphone6实际宽度 375px），而设计稿上的宽度是750px，早些年是直接把全部尺寸/2，如今我会这样用rem实现自适应：
html {
font-size: calc(100vw / 7.5);//除以的7.5是根据设计稿的屏幕宽度来定的，这样750px宽度下根元素字体大小则为750px/7.5=100px=1rem
}其中，100vw是设备宽度deviceWidth，这样就实现了不一样设备宽度下，动态修改根字体font-size的大小，好比：
deviceWidth = 320，font-size = 320 / 7.5 = 42.6667px //iphone5
deviceWidth = 375，font-size = 375 / 7.5 = 50px //iphone678 X
deviceWidth = 414，font-size = 414 / 6.4 = 55.2px //iphone678 plus因此设计思路就是，根据设计稿将html的font-size设置为100px。好比750物理像素的设计稿，就除以7.5。
将设计稿的尺寸除以100便可，换算很方便。
优化：
像上面这样设计的话，会无限制放大，在大屏上很很差看。解决方法就是给根元素字体大小限制最大最小值，以及body也增长最大最小宽度限制，这样就能够改善用户体验了。
html {
//设置根字体大小单位为vw，页面元素的尺寸单位都设为rem，搭配vw和rem，可实现布局根据视口变化而变化
font-size: calc(100vw / 7.5);
// 同时，经过Media Queries 限制根元素字体最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增长最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大太小
body {
max-width: 540px;
min-width: 320px;
}
#app {
font-size: initial; //重置页面字体大小恢复为浏览器默认16px，不然就显示成50px了
}有时我们拿到的是375iphone6的一倍图，该怎么去设置呢？
只要将设计稿的尺寸除以50便可。
但我们有时候还会拿到640的图，那时候该怎么去换算呢，利用一下scss的变量吧
// rem 单位换算：定为 75px 只是方便运算，750-75px、640-64px、1080-108px，如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值（这个值是变动的）
@function rem($px) {
@return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750; //这个变量值是不变的
html {
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}二、 小程序中的rpx
从小程序的概念中可以知道，rpx是尽量还原了在750物理像素下，1rpx=1物理像素的比例。当我们切换移动设备的时候，移动设备的物理像素会变化，小程序内部也会有个算法计算当前rpx的值在屏幕中实际物理像素的一个比值。比如在iphone5中1rpx = 0.42px = 0.84物理像素。
小程序中rpx与px的转换
例如：设计稿750px宽度
那么恭喜您，你设计稿上宽度是多少，那么你就定义多少rpx，也就是 1px = 1rpx
例如：设计稿640px宽度
那么很遗憾，你需要转换一下 1px = 750/640 rpx
也有小伙伴想在小程序中使用rem，小程序中如何继续使用rem
例如：设计稿750px宽度
此时1rem = （750/20）rpx = 37.5px
例如：设计稿640px宽度
此时1rem = （640/20）rpx = 32px
注意：无论设计稿多少，rem与rpx换算总是一样的，但是rem与px在小程序中换算是 rem = 设计稿宽/20，这一点与我们平时使用的rem完全不一样。
三、用Scss，仅使用vw作为CSS单位
//iPhone 6尺寸一倍图作为设计稿基准
$vw_base: 375;
@function vw($px) {
@return ($px / 375) * 100vw;
}无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位
.mod_nav {
background-color: #fff;
&_list {
display: flex;
padding: vw(15) vw(10) vw(10); // 内间距
&_item {
flex: 1;
text-align: center;
font-size: vw(10); // 字体大小
&_logo {
display: block;
margin: 0 auto;
width: vw(40); // 宽度
height: vw(40); // 高度
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
&_name {
margin-top: vw(2);
}
}
}
}