这是一种有效和正确的方式来设置媒体查询？ [英] Is this a VALID and correct way to set up media queries?

问题描述

<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） ，但不是小nokia。具有352px的excact widht，和416 px的高度？然后这是最小的。

Is this a VALID way to set up a stylesheet (NormalTouchPhones.css) targeting all regular touch-phones, but not small nokia. wich has excact widht of 352px, and heigth of 416 px? And then this is for the smallest.

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

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

I also have this in my index file.

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

我也设置了我的样式表的降序，桌面在顶部，然后是我的记事本， - 手机，那么最小的手机，像诺基亚和索尼 - 埃里克森的。
它会正常工作吗？感谢您的任何意见，无论是为了改善或希望确认我已经接近这正确：）

I have also set my stylesheet's descending, Desktop's at the top, then my Notepads, then my bigger Touch-phones, then the smallest of phones, like Nokia's and Sony-Ericcson's. Will it work correctly? Thank You for any comments, both for improving or hopefully confirm I have approached this correctly :)

推荐答案

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

现在正在进行中，感谢您的指导：）

This is working out now, thanks for guidance :)

只是似乎有一个问题，我把（-webkit-device-pixel-ratio：2.0），这是目标google chrome，在我的手机上。

Only seem to be one problem, I put in (-webkit-device-pixel-ratio:2.0), and this targets google chrome, on my mobile.

因此Google Chrome和标准的互联网浏览器在我的Galaxy s3上拥有相同的内容。也许错了吗？
是谷歌Chrome 2.0，safari不是？相同的样式表没有device-pixel-ratio设置为2.0，给我的移动互联网我想要，但不是谷歌Chrome在移动。在我的桌面chrome浏览器没有效果你。

So that Google chrome, and the standard Internet browser, vies the same content on my Galaxy s3. Perhaps wrong to do this? Is google Chrome 2.0, and safari not? The same stylesheet without device-pixel-ratio set to 2.0, gives my mobile internet what I want, but not google chrome in mobile. Has no effect in my desktop chrome browser thou.

但是safari ..在macbook空气，我看到与在移动，一样的理由为什么，和任何方式解决这个问题？

But safari.. On macbook air, I view the same as on mobile, and ideeas to why, and any way to solve this?

这篇关于这是一种有效和正确的方式来设置媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！