媒体查询中是否必须使用设备像素比率



我只需要澄清一个关于设备像素比的问题,我必须在媒体查询中使用它吗?如果我不这样做,会对他们产生影响吗?我的意思是,有很多设备使用360X640屏幕分辨率,例如:

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

所以,如果我只对门户和景观进行两次媒体查询,比如:

<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或大于4的像素比。第一组链接标签可能是您应该使用的。

最新更新