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

Posted yznotes

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端适配---响应式布局---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 2

 

 

 

 

 

以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)。

第...种情况:依次类推......

以上是关于移动端适配---响应式布局---rem布局---vw布局的主要内容,如果未能解决你的问题,请参考以下文章

移动端适配的问题

关于移动端适配

适配布局类型

最优适配布局

移动端布局总结

移动端响应式布局,rem动态更新