手机网民达9.32亿，「移动端页面重构技术」你该学了！

由于移动互联网的发展，我们在移动端消耗的时间越来越多，对于现在的年轻人，可以说几乎手机不离身。

根据中国互联网络信息中心发布的第 46 次《中国互联网络发展状况统计报告》，中国网民规模为9.40亿，其中手机网民规模为9.32亿，我国网民使用手机上网比例达99.2% 。

因此，越来越多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 代码：

以上就是关于移动端重构的相关知识内容。移动端页面重构有很多种布局方式，也会在未来的文章中继续和大家分享。

随着前端技术的不断发展，前端行业进入“黄金时代”。在激烈竞争下，经受住考验的永远是那批更优秀的人。

前端开发的道路没有捷径

只有不断学习和积累经验

想要入门的同学赶紧行动起来吧！

好 课 推 荐

HTML&JS+前端基础班  /  14天

主要内容

•自适应布局 •BFC •蓝湖 •选择器 •盒模型 •浮动 •背景 •定位 •Flex •转换 •Web 字体 •动画 •标签语法 •排版标签 •布局标签 •多媒体标签 •电商网页开发

可解决的现实问题

借助蓝湖工具，参照设计稿，进行 PC 端静态网页的开发。

可掌握的核心能力

•熟练运用 HTML 语法 •掌握语义化的本质 •合理使用 HTML 标签编写网页的结构 •通过浮动、定位、Flex 精细控制网页布局 •通过背景、圆角、阴影、渐变等美装饰美化网页内容 •结合转换、过渡、动画等高级特性增强用户体验 •能够编写大型综合性网页 •基于设计稿编写网页 •借助蓝湖协同平台进行网页开发 •体验真实团队开发流程 

HTML&JS+前端基础班

14天课程 现优惠价 28 元

更多课程详情 / 抢占名额

立即扫码咨询

END