移动端页面布局

移动端页面布局

1、弹性布局（100%布局，流式布局）——拉勾网、天猫首页

好处：充分发挥大手机的优势——显示内容越多
缺点：屏幕过大，间距过大，比例失调。

特点：

• 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变；
• 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边。

2、等比缩放布局（rem布局）——网易、淘宝首页

• 视口(viewport)设置：
• 在html上根据不同分辨率设置不同font-size，通过js计算出来

什么是DPR
设备的物理像素和逻辑像素（真实像素/css像素）的对应关系，即物理像素（设备像素）/逻辑像素，默认缩放为100%的情况下，设备像素和CSS像素的比值。例如iphone6，屏幕逻辑像素为375PX，而购买时所知的750PX，这就是屏幕的物理像素。
其实每个手机的DPR不全都是一样的，例如我们的iphone6它的DPR是2，但是iphon6Plus它的DPR却是3，在早先的移动设备中呢，是没有DPR这个概念的，随着我们技术的发展，移动设备的屏幕像素密度越来越高，苹果公司从iphone4开始推出了视网膜屏幕，之所以叫视网膜屏幕，是因为屏幕的PPI，也就是屏幕像素密度太高了，人的视网膜无法分辨出屏幕上的像素点。
iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是DPR = 2
DPR = 设备像素 / 逻辑像素
实际上从来用不上设备像素 ，唯一的例外是screen.width/height

5，常见的移动端屏幕尺寸
2.4英寸，3.5英寸，3.7英寸，4.2英寸，4.7英寸，5.0英寸，5.5 英寸，6.0英寸，这是我们移动端页面重构最基本的概念。
devicePixelRatio设备像素比
视网膜屏幕

• 动态设置viewport的scale，淘宝触屏版首页布局的前提是viewport的scale根据devicePixelRatio动态设置：在devicePixelRatio为1的时候，scale为1；在devicePixelRatio为2的时候，scale为0.5；在devicePixelRatio为3的时候，scale为0.3333

• 动态计算html的font-size：font-size = deviceWidth / 100

• 布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/100

第二，移动端页面重构常用单位
因为要适应所有的移动端屏幕尺寸，所以传统的px布局页面在移动端就不太适用。

Em是父盒子的倍数，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/设计稿宽度

例如：设备的分辨率为6401136，逻辑像素为320568，1VW就等于3.2px，我们把font-size：100px，转换成VW就等于31.25VW;
1rem等31.25VW获取到根元素大小一起结合写等比例绽放布局。

VW，VH是CSS3新增的单位，它只能有着自己的兼容性，IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持。

flexible.js是淘宝为了适配移动端开发的一个插件 http://huodong.m.taobao.com/act/yibo.html
flexible.js 做的三件事：
• 动态改写标签
• 给元素添加data-dpr属性，并且动态改写data-dpr的值
• 给元素添加font-size属性，并且动态改写font-size的值
目前Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：

1. 1a = 7.5px
2. 1rem = 75px
   https://github.com/flashlizi/cssreml转换插件

.adapter_size {font-size: 12px;/设备像素比为1/}
[data-dpr=“2”] .adapter_size {font-size: 14px;/设备像素比为2/}
[data-dpr=“3”] .adapter_size {font-size: 16px;/设备像素比为3/}

动态计算html的font-size

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}