Question

<link id ="style" rel="stylesheet" type="text/css" title="other" href="regularStyles.css" />
<link rel="stylesheet"  media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css"  />
<link rel="stylesheet" media= "all and (min width: 319px) and (max width: 1281px) and not desktop and not (width: 352px; height: 416px) " href="NormalTouchPhones.css" />

这是一种有效的方式来设置针对所有常规触控手机的样式表（NormalTouchPhones.css），但不是小诺基亚。这个准确度为352像素，高度为416像素？然后这是最小的。

media= "all and (mid widht: 175px) and (max-widht: 353px) and (min-height: 207px) and (max-height: 321px)and not desktop" href="smallNokias.css"

我的索引文件中也有这个。

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8.css" media="screen" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

我还设置了样式表的下降，桌面位于顶部，然后是我的笔记本，然后是我更大的触控手机，然后是最小的手机，如诺基亚和索尼爱立信。它会正常工作吗？感谢您提出任何意见，无论是为了改进还是希望确认我已经正确地接近了这一点：）

Answer 1

<link id ="style" rel="stylesheet" media="screen" type="text/css" title="other" href="android.css" />
<link rel="stylesheet" media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css"  />
<link rel="stylesheet" media= "all and (min-width: 320px) and (max-width: 1281px) and not (width: 352px; height: 416px) and not desktop, (-webkit-device-pixel-ratio: 2.0) " href="android.css" />
<link rel="stylesheet" media= "all and (max-widht: 240px) and (max-height: 320px) and not desktop" href =" smallest.css" />

现在正在努力，感谢指导：）

似乎只是一个问题，我放入（-webkit-device-pixel-ratio：2.0），这是针对我的手机上的谷歌浏览器。

因此，Google Chrome和标准互联网浏览器会在我的Galaxy s3上查看相同的内容。这样做可能有误吗？谷歌Chrome 2.0，野生动物园不是吗？没有设备像素比率设置为2.0的相同样式表，为我的移动互联网提供了我想要的东西，但不是移动设备中的谷歌浏览器。在我的桌面Chrome浏览器中没有效果。

但是safari ..在macbook air上，我在移动设备上看到了相同的内容，并且想到了原因，以及解决这个问题的方法吗？

这是设置媒体查询的有效且正确的方法吗？

1 个答案: