浅谈移动端布局问题

移动端推广速度快，效果好，愈来愈多的企业，商家开始重视移动站的建设和移动页面（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