【发布时间】:2016-04-01 22:37:30
【问题描述】:
我只需要澄清一个关于设备像素比的问题,我必须在我的媒体查询中使用它吗?如果我不这样做,它会以某种方式影响他们吗?我的意思是,有很多设备使用 360X640 屏幕分辨率,例如:
三星 Galaxy S6 (360X640 , 4dpr) 索尼 Xperia Z (360X640 , 3dpr) 三星 Galaxy Note II (360X640 , 2dpr)
所以,如果我只对肖像和风景进行 2 次媒体查询,如下所示:
<link rel="stylesheet" media="only screen and (device-width : 360px) and (device-height : 640px) and (orientation : portrait)" href="style360.css"/>
<link rel="stylesheet" media="only screen and (device-width : 640px) and (device-height : 360px) and (orientation : landscape)" href="style640.css"/>
这样做会不会有所不同:
<link rel="stylesheet" media="only screen and (device-width : 360px) and (device-height : 640px) and (-webkit-device-pixel-ratio: 2) and (orientation : portrait)" href="style360.css"/>
<link rel="stylesheet" media="only screen and (device-width : 640px) and (device-height : 360px) and (-webkit-device-pixel-ratio: 2) and (orientation : landscape)" href="style640.css"/>
<link rel="stylesheet" media="only screen and (device-width : 360px) and (device-height : 640px) and (-webkit-device-pixel-ratio: 3) and (orientation : portrait)" href="style360.css"/>
<link rel="stylesheet" media="only screen and (device-width : 640px) and (device-height : 360px) and (-webkit-device-pixel-ratio: 3) and (orientation : landscape)" href="style640.css"/>
<link rel="stylesheet" media="only screen and (device-width : 360px) and (device-height : 640px) and (-webkit-device-pixel-ratio: 4) and (orientation : portrait)" href="style360.css"/>
<link rel="stylesheet" media="only screen and (device-width : 640px) and (device-height : 360px) and (-webkit-device-pixel-ratio: 4) and (orientation : landscape)" href="style640.css"/>
只是我在网上找到的有关媒体查询的每个教程或解释都在查询中包含了设备像素比,我试图在网上查找信息以查看是否必须,但不能找到任何东西。
【问题讨论】:
标签: css media-queries pixel-ratio