rya*_*yan 6 html5 frontend css3
我做了一些研究devicePixelRatio和dppx:
deicePixelRatio:返回当前显示设备上一个物理像素的(垂直)大小与一个CSS像素大小的比率.
dppx:每'px'单位的点数.
我认为他们只是一样,但我不确定,我是对的吗？
小智 7
在Web开发领域,设备像素比(也称为CSS Pixel Ratio,也称为dppx)决定了CSS如何解释设备的屏幕分辨率.
CSS通过以下公式解释设备的分辨率:device_resolution/css_pixel_ratio.例如:
三星Galaxy S III
实际分辨率:720 x 1280 CSS像素比率:2解释分辨率:(720/2)x(1280/2)= 360 x 640
在查看网页时,CSS会认为该设备具有360x640分辨率屏幕,而媒体查询将响应,就像屏幕是360x640一样.但是屏幕上的渲染元素将是实际360x640屏幕的两倍.
其他一些例子:
三星Galaxy S4
实际分辨率:1080 x 1920 CSS像素比率:3解释分辨率:(1080/3)x(1920/3)= 360 x 640
iPhone 5S
实际分辨率:640 x 1136 CSS像素比率:2解释分辨率:(640/2)x(1136/2)= 320 x 568
创建CSS像素比率的原因是因为随着手机屏幕获得更高的分辨率,如果每个设备仍然具有1的CSS像素比率,那么网页将变得太小而无法看到.典型的全屏桌面显示器是一台24英寸显示器,速度为1920x1080.想象一下,如果该显示器缩小到<5"但具有相同的分辨率.在屏幕上查看内容是不可能的,因为它们会非常小.
这是一个工具,它还可以告诉您当前设备的像素密度:
http://bjango.com/articles/min-device-pixel-ratio/
这是一个可搜索的设备像素比率列表(如果您有要添加到此列表的设备,它们会通过GitHub接受拉取请求)