移动端自适应方案github.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倍图，由于流量会消耗比较大（低端机），因此滚动加载等优化手段就会显得比较重要了。 淘宝设计方案 通过js处理获取手机dpr参数，然后动态生成viewpoint 获取手机物理像素宽度，分成10份，每一份的宽度即是rem的尺寸。 根据设计稿的尺寸（px）分三种情况进行处理，采用px + rem布局 设计方案对比 网易彩票 天 猫 淘 宝 设计方案 采用scale = 1.0写死viewport 采用媒体查询来确定html根元素的font-size值，即rem值 rem + 百分比布局 采用scale = 1.0写死viewport 不采用rem，body的font-size=14px写死 px + flexbox布局 通过js处理获取手机dpr参数，然后动态生成viewpoint 获取手机物理像素宽度，分成10份，每一份的宽度即是rem的尺寸。 根据设计稿的尺寸（px）分三种情况进行处理，采用px + rem布局 优 点 上手快，开发 效率高，兼容性好 设计思路比较 简单，flexbox非常灵活 几乎解决了移动端遇到的 所有问题，堪称完美的解决方案 缺 点 不够灵活和精细 Flexbox的兼容性方面需要好好处理，不够精细 开发效率低，成本高 参考文献 /2050/p/3877280.html /blog/yi-dong-duan-zi-gua-ying-fang-an/ /article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041 /kenblog/blog/373341?fromerr=OQeOo5fR /demo/less/document.html PPT模板下载：/moban/ 行业PPT模板：/hangye/ 节日PPT模板：/jieri/ PPT素材下载：/sucai/ PPT背景图片：/beijing/ PPT图表下载：/tubiao/ 优秀PPT下载：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 资料下载：/ziliao/ PPT课件下载：/kejian/ 范文下载：/fanwen/ 试卷下载：/shiti/ 教案下载：/jiaoan/ THANK YOU * * Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential Microsoft Confidential 移动端自适应方案 分享 by 魏天尧 移动端自适应方案 一些基本概念 网易彩票设计方案 Flexbox介绍 天猫设计方案 遇到一些问题 淘宝设计方案 设