目录

响应式网页设计

  • 响应式网页设计 = 弹性网格 + 弹性图片 + 媒体查询

  • 视口:网页实际显示的区域

  • 百分比宽度 = 目标元素宽度 / 上下文元素宽度

device-width

width=device-width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
iphone 与 iPad 不支持

在 iphone 和 ipad 上,无论是竖屏还是横屏,宽度都是竖屏时 ideal viewport 的宽度

initial-scale

initial-scale = 1 设置页面的初始缩放值,为一个数字,可以带小数

但这次轮到了 windows phone 上的 IE 无论是竖屏还是横屏都把宽度设为竖屏时 ideal viewport 的宽度
initial-scale = 1width=device-width 同时写的情况下,取宽度较大的那个值。

user-scalable

是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许

window.devicePixelRatio

在早先的移动设备中,屏幕像素密度都比较低,如 iphone3,它的分辨率为 320x480,在 iphone3 上,一个 css 像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从 iphone4 开始,苹果公司便推出了所谓的 Retina 屏,分辨率提高了一倍,变成 640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个 css 像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为 ldpi、mdpi、hdpi、xhdpi 等不同的等级,分辨率也是五花八门,安卓设备上的一个 css 像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。
还有一个因素也会引起 css 中 px 的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么 css 中 1px 所代表的物理像素也会增加一倍;反之把页面缩小一倍,css 中 1px 所代表的物理像素也会减少一倍。关于这点,在文章后面的部分还会讲到。
devicePixelRatio = 物理像素 / 独立像素
在 Retina 屏的 iphone 上,devicePixelRatio 的值为 2,也就是说 1 个 css 像素相当于 2 个物理像素。但是要注意的是,devicePixelRatio 在不同的浏览器中还存在些许的兼容性问题,所以我们现在还并不能完全信赖这个东西

  • dip(dp)device independent pixels(设备独立像素),是安卓开发用的单位,1dp 表示在屏幕点密度为 160ppi 时 1px 长度。

  • dpi dpi 是 dot per inch,每英寸多少点,

  • ppi Pixel per inch,每英寸像素数,针对显示器的设计时,dpi=ppi。ppi:pixels per inch,ppi 表示显示设备的点密度,dpi 表示印刷品点密度。

  • px pixel,这个就是我们常说的 css 像素

  • dpr 代表设备缩放比