文档介绍：Html 5 屏幕适配解决方案随着移动和 HTML 5 的持续火热, 移动市场涌现出了大量基于 HTML 5 开发的移动 APP 。由于移动市场的高速发展, 移动设备的快速更新, 使得市场上出现了种类繁多具有各种屏幕尺寸和分辨率的移动设备, 开发者在开发 HTML5 应用时就必须考虑所有屏幕尺寸和分辨率类型的应用场景,为移动应用做屏幕尺寸和分辨率的适配工作。想要为移动应用做屏幕适配首先要了解一些概念。物理像素, 即屏幕上的最小显示单元; 设备独立像素, 即由程序使用的虚拟像素(如 CSS 中的 px ); 设备像素比, 设备像素比=物理像素/ 设备独立像素, 定义了物理像素与设备独立像素间的对应关系, 简称 dpr ( device pixel ratio ) 。在不同屏幕上, CSS 像素呈现的大小(物理尺寸)是一致的,不同的是一个 CSS 像素对应的物理像素个数是不同的。举例来讲,普通屏幕的每个像素点与 CSS 中定义的像素点大小相同, 但是苹果的 retina 屏幕一个 CSS 像素对应 4 个物理像素。因此, 在开发应用时就需要对不同屏幕(高清和非高清)进行区分处理。就一张普通的图片( PNG 、 JPG 、 GIF 等) 来讲, 其最小的数据单元称为位图像素。理论上, 一个位图像素对应一个物理像素, 这样图片才能完美的清晰展示, 但是对于高清屏幕( Retina ) 就会出现位图像素点不够的情况, 这样会导致图片模糊。遇到这种情况, 通常要准备两张图片, 如一张 200 × 300 ( CSS px ) ,并提供一张 400 × 600 的高清图片,这样位像素点就是原来的 4 倍,在 retin a 屏幕下正好与其物理像素点一一对应, 图片自然就清晰了。当然, 具体要加载那种图片是有 dpr 来判断的,在 JavaScript 中,可以通过 获取到当前设备的 dpr ,在 css 中,可以通过-webkit-device-pixel-ratio , -webkit-min-device-pixel-rati o 和-webkit-max-device-pixel-ratio 进行媒体查询, 对不同 dpr 的设备, 做一些样式适配。与图片问题类似, 高清屏幕还存在一种“失真”的问题,即 border:1p x 问题。对于 border:1p x 在所有屏幕中的物理大小其实是相同的( 下图灰色区), 但这怎能体现出高清呢?对于 retin a 屏幕来说, 一个 CSS 像素由 4 个物理像素组成, 因此其最细的线条并不是 1px , 而是 , 如下图红色框。而一般情况下设计师想要的 retina 下 border: 1px ,其实就是 1 物理像素宽,这种更细粒度的划分也带来的视觉上的高清。当然, 除了高清上的适配, 还存在着屏幕大小上的适配, 即页面布局问题。目前解决该问题最好用的方案是使用相对单位( rem ) ,主要工作就是针对不同手机屏幕尺寸和 dpr 动态 的改变根节点 html 的 font-size 大 小( 基 准值)。 rem= * dpr / 10 ,乘以 dpr 是因为页面有可能为了实现 1