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

【问题标题】：Is this a VALID and correct way to set up media queries?这是设置媒体查询的有效且正确的方法吗？
【发布时间】：2015-03-14 09:17:07
【问题描述】：

<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" />

我还设置了样式表的降序，桌面在顶部，然后是记事本，然后是较大的触控手机，然后是最小的手机，例如诺基亚和索尼爱立信的手机。它会正常工作吗？感谢您的任何 cmets，无论是改进还是希望确认我已经正确处理了这一点:)

【问题讨论】：

你应该重新思考你的价值观。 IPohne 和大多数其他 pohnes 的宽度也为 320 像素（横向为 480 像素）。那应该是你分钟。宽度！看看：metaltoad.com/blog/…
诺基亚样式表有一些拼写错误，现在已编辑。
好的，我的 NormalTouchPhones.css 中不是这样吗？（最小宽度：319px）或者像 Nokia.css 这样的东西会覆盖它吗？
那么最小宽度是 320，而不是 319？
是的，我不认为你需要做-1。但另一件理论上的事情 - 当我用一个 175 像素的小显示器访问您的网站时会发生什么？您不应该将 min-width 放入最小的媒体查询中，而是在您的 css 中使用用户 Body{min-width:175px;}

标签： html css media-queries stylesheet

【解决方案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。

因此，Google chrome 和标准 Internet 浏览器在我的 Galaxy s3 上竞争相同的内容。也许这样做是错误的？ google Chrome 2.0 和 safari 不是吗？没有将 device-pixel-ratio 设置为 2.0 的相同样式表为我的移动互联网提供了我想要的东西，但在移动设备中却没有 google chrome。在我的桌面 chrome 浏览器中没有效果。

但是 safari.. 在 macbook air 上，我的看法与在移动设备上相同，以及为什么，以及解决此问题的任何方法？

【讨论】：