在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
由于移动互联网的发展，我们在移动端消耗的时间越来越多，因此很多PC端的服务不断的转移到移动端，同时由于移动端的多平台话，也需要用到移动端页面的重构。作为一个web高级开发工程师而言，掌握移动端页面重构技术，会为自己增加更多的就业机会。
首先我们了解一些关于移动端布局的一些概念。
什么是移动端页面布局？
移动端页面布局，一个好的页面布局能够减少代码量和减少CSS3属性的重复率。所以做好布局很重要，合理安排好标签，合理给标签命名，样能提高页面的性能。
什么是Viewport？
就是浏览器，用来显示网页的那一部分区域，也就是说浏览器的实际宽度是和我们手机的宽度不一样的，无论你的手机宽度是320PX还是640PX，在手机内部的宽度，始终会是浏览器本身的Viewport。
什么是像素密度(PPI)？
屏幕上每英寸可以显示像素点的数量，单位是PPI，屏幕像素密度与屏幕尺寸以及分辨率有关，屏幕尺寸越小，分辨率越高。
什么是DPR？
设备的物理像素和逻辑像素的对应关系，即物理像素/逻辑像示，默认缩放为100%的情况下，设备像素和CSS像素的比值。
常见的移动端屏幕尺寸
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 代码：
以上就是关于移动端重构的相关知识内容。移动端页面重构有很多种布局方式，未来的文章中会和大家分享。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
Web前端求职必备 常见前端面试题汇总（二）
下一篇：
渐进增强与优雅降级之间的不同
相关推荐 更多
在线学习前端开发学习周期是多久？
在线学习前端开发学习周期是多久？之前遇到很多自学前端的朋友，他们用1-2年的时间自学，依旧没有完全掌握前端开发的运营，从而再去参加线下培训，又用了4-5个月时间，终于达到了就业的水平。然而，现在在线教育逐渐成为前端开发学习者的首选。因为在线学习前端开发的学习周期完全是可控的，一般2-6个月的时间就可以完全掌握实战项目开发。
11172
2019-08-08 11:56:46
Web前端开发培训班课程怎么样？能学到什么知识呢？
Web前端开发就业班课程怎么样？能学到什么知识呢？学习Web前端开发是进入互联网技术领域的捷径。相对后端编程学习而言，Web前端开发相对更加容易，对于零基础人群的入行是非常有利的。这里就和大家分享一下关于Web前端开发就业班课程的相关情况。
8003
2019-12-05 15:48:32
前端开发可以干到多少岁？
移动互联网的蓬勃发展，使得前端开发渐渐变成了为大众所熟知的一门大热的职业。 随着前端开发岗位的走红，网上渐渐出现了前端岗位是青春饭的说法，这是真的吗？其实技术岗位相比于许多传统岗位，有着更长的职业生命周期,因此完全不存在前端开发岗位是青春饭这样的说法。那么，前端开发到底可以干到多少岁呢？
13489
2020-04-28 15:06:06
Web前端在线学习实战教程介绍
从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都属于前端工程师的专业领域。因此掌握Web前端开发技能，在这个大前端时代你将拥有更多的就业选择。为了帮助更多还在前端学习路上的小伙伴，本文将向大家介绍有些Web前端在线学习实战教程，希望大家能够通过实战巩固理论知识，掌握真正的开发技能！
5860
2020-06-01 10:27:35
HTTPS传输协议加密安全原理是什么？
HTTPS其实是SSL+HTTP的简称,当然现在SSL基本已经被TLS取代。在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS和HTTP的区别主要区别：ca申请证书、http是超文本传输协议，https则是具有安全性的ssl加密传输协议；http和https使用的是完全不同的连接方式；链接方式不同。
5886
2020-10-20 16:08:02
