移动端页面布局

移动端页面布局

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}}

你可能感兴趣的:(移动端页面布局)