移动端自适应方案.pptVIP

遇到的问题 1 高清屏下（ dpr1 ）1px线模糊问题 大多数情况下，设计师产出各种尺寸的稿子，都是先画出大尺寸（一般2x）的稿子，再去缩小尺寸，最后导出。 这样会带来问题：如果设计师在2倍稿子里画了一条1px的线（例如border：1px），这时候假如我们要在scale=1.0里呈现的话，就会变成0.5px，而很大一部分手机是无法画出0.5px的。 理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。在普通屏幕下是没有问题的，但是在retina屏幕（dpr=2）下就会出现位图像素点不够，从而导致图片模糊的情况。 遇到的问题 2 高清屏下（ dpr1 ）高清图片模糊问题 对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。所以，对于图片高清问题，比较好的方案就是采用两倍图片。如：200×300(css pixel)img标签，就需要提供400×600的图片。 如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就等于物理像素点个数，图片自然就清晰了。但是对于dpr不同的屏幕采用不同尺寸的图片成本太高，所以淘宝就干脆全部采用2倍图，由于流量会消耗比较大（低端机），因此滚动加载等优化手段就会显得比较重要了