【问题标题】:do u have to use device pixel ratio in media query?你必须在媒体查询中使用设备像素比吗?
【发布时间】: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


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 2012-05-18
      • 1970-01-01
      • 2014-11-06
      • 2019-04-01
      • 2012-07-09
      • 2015-04-23
      • 2012-10-13
      • 2017-05-14
      • 2019-10-28
      相关资源
      最近更新 更多