内容不断更新中，可能存在知识点谬误，欢送斧正

先来看一些概念：


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 //iphone5deviceWidth = 375，font-size = 375 / 7.5 = 50px //iphone678 XdeviceWidth = 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齐全不一样。