移动端页面重构2

Web前端技术是现今互联网行业使用的热门技术,随着智能手机互联网时代的高速发展,掌握好一门计算机语言能够对现今社会有更理性的分析和认识.前端行业一直在网页性能和网页的视觉效果上存在争议.毫无疑问移动端页面重构就有着越来越强大的发展前景和巨大的市场，移动端页面重构包括手机网站重构和微信网站重构。

第一:了解移动端页面布局概念

1.了解html5的特点

简易性:‚可扩展性:ƒ平台无关性:„通用性

CSS3的特点

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力；允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果.因为有了这些特点所以我们移动端页面布局才能更完善。

2，概念

移动端页面布局,一个好的页面布局能够减少代码量和减少CSS3属性的重复率.所以做好布局很重要,合理安排好标签,合理给标签命名,样能提高页面的性能。首先来了解一下概念

1）什么是屏幕分辨率

屏幕分辨率是指横纵方向上的像素点数，单位为PX。

2）什么是Viewport

就是浏览器，用来显示网页的那一部分区域，也就是说浏览器的实际宽度是和我们手机的宽度不一样的，无论你的手机宽度是320PX还是640PX，在手机内部的宽度，始终会是浏览器本身的Viewport。

<meta name="viewport" content="width=device-width" />

3）什么是像素密度（PPi）

屏幕上每英寸可以显示像素点的数量，单位是PPI，屏幕像素密度与屏幕尺寸以及分辨率有关，屏幕尺寸越小，分辨率越高。

4）什么是DPR

设备的物理像素和逻辑像素的对应关系，即物理像素/逻辑像示，默认缩放为100%的情况下，设备像素和CSS像素的比值。

5），常见的移动端屏幕尺寸

3.5英寸，3.7英寸，4.2英寸，4.7英寸，5.0英寸，5.5 英寸，6.0英寸，这是我们移动端页面重构最基本的概念。

第二，移动端页面重构常用单位

因为要适应所有的移动端屏幕尺寸，所以传统的px布局页面在移动端就不太适用。 如何实现强大的屏幕适配布局，需要知道什么是rem，

1，Rem是指相对于根元素的字体大小单位，能等比例适配所有屏幕，根据变化html也就是根元素的字体大小来控制rem的大小，

JS计算：通过获取视口的宽度/实际设计图的宽度*html的font-size

2，CSS3新增单位 VW，VH

VW:视窗宽度，1VW等于视窗宽度的百分之一

VH:视窗高度，1VW等于视窗高度的百分之一

我们也可以把VW转换成PX赋值给font-size，

元素所展示的大小（设计图固定大小）=（VW*设计稿宽度）/100

VW = 元素所展示的大小（设计图固定大小）*100/设计稿宽度

VW，VH是CSS3新增的单位，它只能有着自己的兼容性，IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持。

第三，实例解析

移动端常用布局方式有100%布局，rem布局以及VW布局，首先来通过几个案例来看下各自的布局有什么优点和缺点。

1，100%布局案例

100%布局也就是我们的弹性布局，它有着自己的特点,从下图实际案例中可以看出，无论顶部与底部的bar不管分辨率怎么变，它的宽度和位置都不变； 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息 都位于条目的左边，薪资都位于右边，这就是我们的100%布局的一个好处，它能够充分发挥大手机的优势，手机越大，显示的内容就越多。

我们再仔细观察下面的案例可以发现，图越大，它的间距就越大，字体大小也在变化，比例就会失调，这是100%弹性布局的缺点。

2.rem布局

Rem布局就是等比缩放布局，从下面案例中分析可以看得出，不管是放在iphone5, iphone6, 或者iphone6Plus中，它们都是等比例缩放的，图片要大都大，要小都小，这就是rem布局页面的特点，它是我们最常用的移动端页面布局方式，当然我们也可以用css3新增的VW来布局。

Css 代码：

文章来源：千锋html5