由于移动互联网的发展，我们在移动端消耗的时间越来越多，对于现在的年轻人，可以说几乎手机不离身。根据中国互联网络信息中心发布的第46次《中国互联网络发展状况统计报告》，中国网民规模为9.40亿，其中手机网民规模为9.32亿，我国网民使用手机上网比例达99.2%。
因此，越来越多PC端的服务不断转移到移动端，同时由于移动端的多平台化，也需要用到移动端页面的重构。
作为一个web高级开发工程师，掌握移动端页面重构技术，成为必不可少的技能之一，同时也会为自己增加更多的就业机会，提升个人职场竞争力。
下面播妞带大家详细学习一下
记得收藏哦！
关于移动端布局的一些概念
什么是移动端页面布局？
移动端页面布局，一个好的页面布局能够减少代码量和减少CSS3属性的重复率。所以做好布局很重要，合理安排好标签，合理给标签命名，样能提高页面的性能。
什么是Viewport？
就是浏览器，用来显示网页的那一部分区域，也就是说浏览器的实际宽度是和我们手机的宽度不一样的，无论你的手机宽度是PX还是PX，在手机内部的宽度，始终会是浏览器本身的Viewport。
什么是像素密度(PPI）？
屏幕上每英寸可以显示像素点的数量，单位是PPI，屏幕像素密度与屏幕尺寸以及分辨率有关，屏幕尺寸越小，分辨率越高。
什么是DPR？
设备的物理像素和逻辑像素的对应关系，即物理像素/逻辑像示，默认缩放为%的情况下，设备像素和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*设计稿宽度)/。VW=元素所展示的大小(设计图固定大小)*/设计稿宽度。
VW，VH是CSS3新增的单位，它只能有着自己的兼容性，IE9+局部支持，chrome/firefox/safari/opera支持，iOSsafari8+支持，Androidbrowser4.4+支持，chromeforandroid39支持。
实例解析
移动端常用布局方式有%布局，rem布局以及VW布局，首先来通过几个案例来看下各自的布局有什么优点和缺点。
1.%布局案例
%布局也就是我们的弹性布局，它有着自己的特点,从下图实际案例中可以看出，无论顶部与底部的bar不管分辨率怎么变，它的宽度和位置都不变;中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边，这就是我们的%布局的一个好处，它能够充分发挥大手机的优势，手机越大，显示的内容就越多。
我们再仔细观察下面的案例可以发现，图越大，它的间距就越大，字体大小也在变化，比例就会失调，这是%弹性布局的缺点。
2.rem布局
Rem布局就是等比缩放布局，从下面案例中分析可以看得出，不管是放在iphone5,iphone6,或者iphone6Plus中，它们都是等比例缩放的，图片要大都大，要小都小，这就是rem布局页面的特点，它是我们最常用的移动端页面布局方式，当然我们也可以用css3新增的VW来布局。
Css代码：
以上就是关于移动端重构的相关知识内容。移动端页面重构有很多种布局方式，也会在未来的文章中继续和大家分享。
随着前端技术的不断发展，前端行业进入“*金时代”。在激烈竞争下，经受住考验的永远是那批更优秀的人。
前端开发的道路没有捷径
只有不断学习和积累经验
想要入门的同学赶紧行动起来吧！
好课推荐
HTMLJS+前端基础班/14天
主要内容
?自适应布局?BFC?蓝湖?选择器?盒模型?浮动?背景?定位?Flex?转换?Web字体?动画?标签语法?排版标签?布局标签?多媒体标签?电商网页开发
可解决的现实问题
借助蓝湖工具，参照设计稿，进行PC端静态网页的开发。
可掌握的核心能力
?熟练运用HTML语法?掌握语义化的本质?合理使用HTML标签编写网页的结构?通过浮动、定位、Flex精细控制网页布局?通过背景、圆角、阴影、渐变等美装饰美化网页内容?结合转换、过渡、动画等高级特性增强用户体验?能够编写大型综合性网页?基于设计稿编写网页?借助蓝湖协同平台进行网页开发?体验真实团队开发流程
HTMLJS+前端基础班
14天课程现优惠价28元
更多课程详情/抢占名额
立即扫码咨询
END
预览时标签不可点收录于话题#个上一篇下一篇
