移动端自适应方案.ppt

移动端自适应方案
分享 by 魏天尧
移动端自适应方案
一些基本概念
网易彩票设计方案
Flexbox介绍
天猫设计方案
遇到一些问题
淘宝设计方案
设计方案对比
一些基本概念
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: CSS像素)
位图像素
一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)
设备像素比(简称dpr)
设备像素比= 物理像素/ 设备独立像素(在某一方向上,x方向或者y方向)
scale
缩放比:scale = 1/dpr
完美视口
网易彩票设计方案
采用scale =
采用媒体查询来确定html根元素的font-size值,即rem值
rem + 百分比布局
Flexbox介绍
Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。
Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间,主要是为了适应所有类型的显示设备和屏幕大小。
天猫设计方案
采用scale =
不采用rem,body的font-size=14px写死
px + flexbox布局
遇到的问题 1
高清屏下( dpr>1 )1px线模糊问题
大多数情况下,设计师产出各种尺寸的稿子,都是先画出大尺寸(一般2x)的稿子,再去缩小尺寸,最后导出。这样会带来问题:如果设计师在2倍稿子里画了一条1px的线(例如border:1px),这时候假如我们要在scale=,,。
理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。在普通屏幕下是没有问题的,但是在retina屏幕(dpr=2)下就会出现位图像素点不够,从而导致图片模糊的情况。
遇到的问题 2
高清屏下( dpr>1 )高清图片模糊问题
对于dpr=2的retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊(注意上述的几个颜色值)。所以,对于图片高清问题,比较好的方案就是采用两倍图片。如:200×300(css pixel)img标签,就需要提供400×600的图片。
如此一来,位图像素点个数就是原来的4倍,在retina屏幕下,位图像素点个数就等于物理像素点个数,图片自然就清晰了。但是对于dpr不同的屏幕采用不同尺寸的图片成本太高,所以淘宝就干脆全部采用2倍图,由于流量会消耗比较大(低端机),因此滚动加载等优化手段就会显得比较重要了。
淘宝设计方案
通过js处理获取手机dpr参数,然后动态生成viewpoint
获取手机物理像素宽度,分成10份,每一份的宽度即是rem的尺寸。
根据设计稿的尺寸(px)分三种情况进行处理,采用px + rem布局
设计方案对比
网易彩票
天猫
淘宝
设计方案
采用scale =
采用媒体查询来确定html根元素的font-size值,即rem值
rem + 百分比布局
采用scale =
不采用rem,body的font-size=14px写死
px + flexbox布局
通过js处理获取手机dpr参数,然后动态生成viewpoint
获取手机物理像素宽度,分成10份,每一份的宽度即是rem的尺寸。
根据设计稿的尺寸(px)分三种情况进行处理,采用px + rem布局
优点
上手快,开发
效率高,兼容性好
设计思路比较
简单,flexbox非常灵活
几乎解决了移动端遇到的
所有问题,堪称完美的解决方案
缺点
不够灵活和精细
Flexbox的兼容性方面需要好好处理,不够精细
开发效率低,成本高