vw+rem实现移动端布局

上篇有写到移动端开发-媒体查询 + rem，那么移动端开发了除了媒体查询还有什么方法能快速的去实现呢？

下面我就来介绍一下vw+ rem开发移动端。 

首先我们先了解几个知识点：vw、vh、drp

1、vw：viewpoint width，视口的宽度，1vw 等于视口宽度的 1%；100vw = 视口的宽度的100%；

2、vh：viewpoint height，视口的高度，1vh等于视口高度的1%；/3、dpr：像素比，

做开发的时候，如果设计给了你一张移动端为1080或者750或者640的设计图不了解这个的话就疯了，这么大的设计图，怎么做移动端呀，所以在这里会存在一个像素比，设计图量出来的尺寸就是物理像素，我们实际上要写入代码的叫做逻辑像素，那么dpr就是逻辑像素和物理像素的比；

dpr = 逻辑像素 / 物理像素，dpr的取值怎么取呢？

（1）如果你的设计图是750px,那么逻辑像素就是750px,那么dpr的取值就是2；比如你量出来的height=120px；那么我们实际写在代码中的逻辑像素= 120px（物理像素） / 2（dpr） = 60px;

（2）如果你的设计图是640px,那么逻辑像素就是640px,那么dpr的取值就是2；比如你量出来的height=120px；那么我们实际写在代码中的逻辑像素= 120px（物理像素） / 2（dpr） = 60px;

（3）如果你的设计图是1080px,那么逻辑像素就是1080px,那么dpr的取值就是3；比如你量出来的height=120px；那么我们实际写在代码中的逻辑像素= 120px（物理像素） / 3（dpr） = 40px;

dpr就是固定的取值，具体这个值去2还是3，就看你们的设计图辣。

好啦，那下面我们来看看vw 结合rem怎么去使用吧！

（1）如果设计图为640px，那么逻辑像素的话为320px,那么100vw = 320px,那么1px = 0.3125vw;

我们就只要给根节点设置：

html {

     font-size:0.3125vw；

}

比如其他元素的宽高设置：60rem = 120px量出来的物理像素 / dpr（2）;就够能随着设备不同而相应的去改变啦。

（2）如果设计图为750px，那么逻辑像素的话为375px,那么100vw = 375px,那么1px = 0.26.67vw;

我们就只要给根节点设置：

html {

     font-size:0.26.67vw；

}

（3）如果设计图为1080px，那么逻辑像素的话为360px,那么100vw = 360px,那么1px = 0.27.78vw;

我们就只要给根节点设置：

html {

     font-size:0.27.78vw；

}

比如其他元素的宽高设置：40rem = 120px量出来的物理像素 / dpr（2）;就够能随着设备不同而相应的去改变啦。

哈哈哈。。有没有觉得超级简单，其实了解了，真的很方便的去实现移动端布局啦。