你必须在媒体查询中使用设备像素比吗?
do u have to use device pixel ratio in media query?
我只是想澄清一个关于设备像素比的问题,我必须在我的媒体查询中使用它吗?如果我不这样做,它会以某种方式影响他们吗?我的意思是,有很多设备使用 360X640 屏幕分辨率,例如:
三星 Galaxy S6(360X640,4dpr)
索尼 Xperia Z(360X640,3dpr)
三星盖乐世 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"/>
只是我在网上找到的所有关于媒体查询的教程或解释都在查询中包含了设备像素比,我试图在网上查找资料,看看是否必须,但不能找不到任何东西。
要回答您的第一个问题,不,您不必在媒体查询中使用设备像素比。
第二个问题,两组link标签不等价,因为第二组不考虑像素比等于1或大于4的。第一组link 标签可能是你应该使用的。
我只是想澄清一个关于设备像素比的问题,我必须在我的媒体查询中使用它吗?如果我不这样做,它会以某种方式影响他们吗?我的意思是,有很多设备使用 360X640 屏幕分辨率,例如:
三星 Galaxy S6(360X640,4dpr) 索尼 Xperia Z(360X640,3dpr) 三星盖乐世 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"/>
只是我在网上找到的所有关于媒体查询的教程或解释都在查询中包含了设备像素比,我试图在网上查找资料,看看是否必须,但不能找不到任何东西。
要回答您的第一个问题,不,您不必在媒体查询中使用设备像素比。
第二个问题,两组link标签不等价,因为第二组不考虑像素比等于1或大于4的。第一组link 标签可能是你应该使用的。