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