移动端布局

学习笔记@逆战班

移动端的布局主要分为四类,分别是流式布局,rem布局,响应式布局和弹性布局。四种布局都能很好的适应手机屏幕分辨率。

1 、流式布局:通过设置viewport可视窗口:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

布局窗口等于可视窗口。这样的布局方式,就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。流式布局优点是大屏幕下能显示更多内容,充分利用可视空间,使用户能在大分辨率的屏幕下获取更多信息。但是在相对较宽的比例下会有些不协调,屏幕显示的内容可能会不对称。

2、 rem布局

首先,1rem等于html标签的font-size值,rem布局就是通过在不同分辨率下html的font-size值的调节,适配不同的设备进行等比缩放。这时候又引进了一个新的单位“VW”,通过VW、rem、html的font-size值三个单位的转换,达到rem布局。屏幕分成100等份。1%等于1vw,根据iphone6、7、8下屏幕分辨率是375px,可得1vw == 3.75px,100px == 26.666667vw,所以设置html根元素的font-size值为26.666667vw,在iphone6、7、8下同样的100px等于100px,iphone6、7、8plus下屏幕分辨率为414px,1vw == 4.14px,4.14 * 26.666667 == 110.4px,所以在375px的屏幕分辨率下100px等于100px,而414px屏幕分辨率下100px等110.4px,不同分辨率下元素的大小也是等比缩放的,这就是rem布局。

3 、 响应式布局

响应式布局,简言之就是一套代码适应多种屏幕分辨率,适用小网站,页面转换不多的博客,小型活动介绍和企业简章等。

这种布局一定程度上简化了代码量,提高了代码的利用率,也减轻了前端工作量,页面切换美观,吸引眼球。

但是,由于一套代码要在移动端各种屏幕分辨率下切换,甚至还有可能切换到PC端,暴露了一个很大的劣势:网页承载量和功能需求要大打折扣,不适用大网站,大型开发工作。

4 、 弹性布局

高度定死,宽度自适应,元素都采用px做单位。

随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在那个宽度需要调整的时候使用响应式布局调试就行(比如网易新闻),这就实现了适配。

 

移动端布局

上一篇:call,apply,bind使用区别


下一篇:安卓手机下拉网页出现"由QQ浏览器XX提供技术支持",导致下拉刷新失效解决方案