你必须在媒体查询中使用设备像素比率吗?

时间:2015-12-28 03:43:45

标签: css media-queries pixel-ratio

我只需澄清有关设备像素比的问题,我是否必须在媒体查询中使用它?如果我不这样做,它会以某种方式影响他们吗?我的意思是,有许多设备使用360X640屏幕分辨率,例如:

三星Galaxy S6(360X640,4dpr) 索尼Xperia Z(360X640,3dpr) 三星Galaxy Note II(360X640,2dpr)

因此,如果我只对portatrait和landscape进行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"/>

只是我在网上找到的有关媒体查询的每个教程或解释都包含查询中的设备像素比,我试图在网上查找信息,看看它是否必须,并且不能找不到任何东西。

1 个答案:

答案 0 :(得分:0)

要回答您的第一个问题,不,您不必在媒体查询中使用设备像素比率。

对于第二个问题,两组链接标签不等效,因为第二组不考虑像素比率等于1或大于4.第一组链接标签可能是您应该使用的