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

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)，这针对我手机上的谷歌浏览器。

这样谷歌浏览器和标准的互联网浏览器就可以在我的 Galaxy s3 上查看相同的内容。也许这样做是错误的？ 是google Chrome 2.0，而safari 不是吗？没有将设备像素比设置为 2.0 的相同样式表为我的移动互联网提供了我想要的东西，但没有为移动设备提供谷歌浏览器。你在我的桌面 chrome 浏览器中没有效果。

但是 safari.. 在 macbook air 上，我的看法与在移动设备上的看法相同，我想知道为什么，有什么办法可以解决这个问题？