【郑州校区】浅谈移动端布局问题

文/传智播客郑州校区就业服务部

移动端推广速度快，效果好，越来越多的企业，商家开始重视移动站的建设和移动页面（h5）的制作。随着移动页面的玩法越来越多，对前端技术的要求也会越来越高。

选择合适的布局，是写好移动页面的第一步。今天我们就来谈谈移动端的布局问题。

为什么移动端布局如此混乱？这是由多方的原因造成的。

1. css这套技术系统本身十分混乱，基本上可以说毫无规律可言，依赖于技术人员的熟练程度而不是逻辑更多一些；

2．css历经了多个时代的升级，每一次升级之后，新的技术标准和旧的基本上没有任何关联。比如：table布局，div+css布局，flex布局，grid布局等；

3. 手机终端市场的混乱。当前市场上手机的尺寸五花八门；加上由iphone的retina技术带来的dpr的混乱；

关于移动设备一些基本概念的理解。

一． 物理设备像素。

思考：为什么手电筒只能发出一种颜色的光，而我们的屏幕能发出这么多种颜色的光?

因为我们的屏幕是由无数个小的手电筒组成的，每个点可以发不同颜色的光，最后就组成了我们看到的彩色的效果。

每张图片都是由色点组成的，每个色点称为一个像素。一张图片由30万个色点组成，这个图片的像素就是30W。我们常说相机是多少像素，这个像素实际就是在说这款照相机的感器件有多少个，有100W个感光器件的相机就是100W像素的相机，有4000W个感光器件的相机就是4000W像素，以此类推。一台100W像素的相机拍摄的照片洗成5寸的照片会比洗成6寸清晰一点。

二． 屏幕分辨率

屏幕分辨率是屏幕每行的像素点数*每列的像素点数，每个屏幕有自己的分辨率。屏幕分辨率越高，所呈现的色彩越多，清晰度越高。

结论：

1. 像素的单位本质上是：个数，100像素你可以理解成你有100个手电筒；

2. 同样大小(比如1cm*1cm大小的矩形)，里面的像素越多，画面越清晰；

三．css像素

在pc端1css像素相当于1物理设备像素。

思考：

我们的手机分辨率是640*1136(iphone 5和iphone 5s的物理设备分辨率)，如果我们打开一个纯粹pc端的网站会出现什么情况?

(比如jumei.com,min-width是1090px,在pc端的我的电脑的设备宽度是1280,通过screen.width进行检测)

我们会发现网站会缩小到我们可以看到整个网站(www.jubi.com)

则会发现，有滚动条了,因为禁止缩放了

四． dpr

1个css像素占多少物理设备像素

思考：iphone 5或者iphone 5s一屏幕能看到的极限是多少宽度?

应该是320(这是默认的可视区的css宽度) * 2 = 640px

以上，我们学习完了所有关于移动端布局相关的概念，接下来，我们来聊一聊布局的思路。

假如我们有640px的设计稿，我们如何才能让用户全部看到呢?

思路一：百分比布局

把尺寸除以2，比如我们量出来的是640px ---> 实际上我们只写320px；

如果是iphone 6怎么办? iphone 6的宽度是375px；

由于320和375的宽度其实差别不大，我们可以不定宽度,也就是把整体宽度设定为100%，然后其他的全部量出来是多少。

布局方法

- 拿到设计师给我们的设计稿之后(推荐640px),把所有量出来的尺寸除以2即可

- 遇到等分就用百分比

- 左浮动 + 右浮动(导航部分实现、折扣推荐导航部分) --> 适合于所有的元素宽度固定的

- 左浮动 + padding挤(见超值折扣推荐内容部分) 本质上元素大小在任何尺寸下面都是一致，改变的其实是元素与元素之间的间距大小 --> 适合一个元素宽度固定，另一个宽度自适应；

网站示例

- http://m.duba.com/

- http://m.lagou.com/

百分比布局的缺点

在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

思路二:rem布局

如何理解rem布局？

思考一个问题，假如我们的设计稿是750px,我们量出来一个盒子的宽度是75px,那么在640px下面，它应该是多少合适呢? 答案是:64

问题，如果才能保证你写的css的尺寸只需要写一次，在不同的屏幕尺寸下面不用改?

假如我们在750px下面，我们让html的font-size为75,则这个盒子的宽度是1rem,在640px下面我们让html的font-size为64,则这个盒子的宽度也是1rem，问题就这样解决了。

那么实际开发中，该用什么样等布局思路？

我们打开m.jd.com,m.vip.com，会发现，实际上没有一个网站用了纯粹的百分比或者rem布局，经常会发现各种布局思路混在一起，因为没有一套布局思路能够通用保证不出问题

为什么rem不是万能的?

比如1px，如果我们在dpr是2的情况下就会变得很粗，我们知道那并不是真正的1像素。

推荐布局思路——使用由阿里出品的lib-flexible库。

网址：https://github.com/amfe/lib-flexible；

该如何使用呢？

1. 引入布局用的flexible.js要注意的是不要再写meta:viewport标签了，因为flexible.js会自动帮你创建；

2. 引入base.css；

3. 把设计师的设计稿拿过来，标注稿基准字体大小 = 标注稿宽度 / 10，如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为640，标注稿基准字体大小为64；

4. 除了字体大小以外，其他所有的均按rem来，比如你的设计稿是750px的，那么，假如你量出来的是75px,则是1rem；

字体除外，要根据不同的dpr设置不同的大小，比如如果是750的设计稿，那么字体假如是24px,则在dpr为1的情况下是16px,dpr2的情况下是24px,dpr3的情况下是32px(这块涉及到字体专业知识，总结一句话就是没有人会考虑用奇数字体，https://www.zhihu.com/question/20440679，所以不能让工具帮我们自动算，得写死。

以上是我个人关于移动端布局的一些总结。如有不妥的地方，还请指正。

最后附上关于移动端常见问题当网址：

- http://www.cnblogs.com/PeunZhang/p/3407453.html

- https://github.com/zhiqiang21/blog/blob/master/README.md

- https://github.com/sunmaobin/Mars/tree/master/issues

- http://www.cnblogs.com/PeunZhang/p/4517864.html

- http://www.cnblogs.com/PeunZhang/p/4903710.html

- http://www.cnblogs.com/PeunZhang/p/4633255.html

- http://www.cnblogs.com/PeunZhang/p/3835717.html

- http://www.cnblogs.com/PeunZhang/p/3592096.html

传智播客·黑马程序员郑州校区
高新区长椿路11号大学科技园（西区）东门8号楼三层
地铁一号线梧桐街站A口出
联系方式0371-56061160/61/62

绝对的干货啊

移动端布局