移动端适配---响应式布局---rem布局---vw布局--网易适配

rem和vw布局主要都是为了更好地适配移动端，毕竟手机的型号太多了。

在进行移动端设计的时候，首先要引入一个meta标签。（禁止用户缩放）

1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 

 咱们在刚开始接触移动端的时候，可能都会遇到这种状况：

PS中量取像素和web中手机预览的大小不太同样，彷佛感受web预览效果上要比UI设计图上的尺寸大。

这是由于手机显示像素与咱们用ps量取的像素有必定的比例！

在2010年，iPhone4发布会中，苹果推出了“Retina”高清视网膜显示屏。用易懂的白话来讲就是能在1个像素单位里面显示4个像素，也就是说若是你在ps中量取了一个1px宽，1px高的盒子，那么它在手机上就会显示出看起来像2px宽，2px高盒子的样子。若是想和设计图相吻合，那就必须在量取的基础上除以2。

 市场上手机型号太多，屏幕大小也各自不一样，因此要经过便于维护并且实际适用的方式来开发页面。

1. 响应式布局 and 媒体查询  

响应式布局：根据当前不一样设备，响应不一样代码。

媒体查询：对设备提出询问开始，如表达式结果为真，媒体查询中的css被应用，如为假，则忽略。

1 @media all and (max-width:1040px) and (min-width:768px){
2             div{width:31%;}
3         }
4 @media all and (max-width:767px) and (min-width:450px){
5             div{width:45%;}
6         }
7 @media all and (max-width:449px){
8             div{width:90%;}
9         }

其中，all表明全部设备。若是and后括号里为orientation:portrait，表明竖屏；为orientation:landscape，表明横屏。

2. rem布局  

 所谓rem布局，就是结合媒体查询，随着设备的改变动改html的font-size值。

 设备像素比（DPR）= 物理像素（PS中量取的） /  逻辑像素（手机所显示的）

设备型号	设计图尺寸	DPR
iPhone4/4s	640px	2
iPhone6/7/8	750px	2
iPhone6/7/8P	1080px	3

 

 

 

 

 

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

以iphone4为例，设计图为640px，那么咱们就应将手机宽度设置为640/2 = 320px。若是一个div量取的宽度为10px，那么相应的在手机中的css宽度就应该设置为10 / 2 = 5px。

若是，html的font-size值为16px，那么 1rem = 16px；

3. vw布局  

vw 当前设备屏幕宽度1/100响应式的值。

vh 当前设备屏幕高度1/100响应式的值。

vmin  vw和vh中较小的

vmax   vw和vh中较大的

100vw = 视口width的100%;   100vh = 视口height的100%。

注意：当出现垂直滚动条时，100vw≠width:100%; 100vw包含滚动条，width:100%不包含。

vw和rem相结合

为了方便计算，能够将html的font-size值设置为100px，可是100px是一个固定值，没有办法随着设备的改变而改变。下面用vw来解决html的font-size问题。

第一种状况：

UI设计图为750px =>  dpr为2  =>  适配核心设备375px  =>  100vw = 375px  =>  1vw =  3.75px  =>  100px = 26.67vw 。

因此=>  html{font-size:26.67vw};

若是量取一个盒子宽度为100px。那么css中就应该设置为0.5rem (100px / 2 = 50px，50px / 100 = 0.5rem)。.

第二种状况：

UI设计图为640px =>  dpr为2  =>  适配核心设备320px  =>  100vw = 320px  =>  1vw =  3.20px  =>  100px = 31.25vw 。

因此=>  html{font-size:31.25vw};

若是量取一个盒子宽度为100px。那么css中就应该设置为0.5rem (100px / 2 = 50px，50px / 100 = 0.5rem)。

第...种状况：依次类推......

4. 网易适配  

因为存在一种比例关系=>设计稿宽度  ： 设备宽度  =  设计稿中元素宽度   ： 设备中元素的宽度

得出  设备中元素宽度  = 设计稿中元素宽度 * 设备宽度  /  设计稿宽度

因为1rem = 根元素html 的font-size值。为了方便计算，给“公式中”设计稿元素宽度固定为100。那么每次量取元素时除以100，添加rem单位，即为设备中元素像素值。

设计稿宽度为750px，设备宽度为375，一div宽度为36px。

1.html的font-size设置为  100 * 设备宽度(375)  /  设计稿宽度(750)

2.设备div宽度  =   设计稿中div宽度(36) * 设备宽度(375)  /  设计稿宽度(750)

3.因为单位为rem，因此量取时除以100，添加rem单位。width:0.36rem

(36/100)rem   =   (36/100)  *  ((100 * 375) / 750)   =  36  *  375  /  750   =  18px

转换为vw方法  =>

1 font-size: calc(100vw/7.5);
2 font-size: -webkit-calc(100vw/7.5);