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);就够能随着设备不同而相应的去改变啦。

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

你可能感兴趣的:(移动端)