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

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 :)

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

This is working out now, thanks for guidance :)

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

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.

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

来源：https://stackoverflow.com/questions/27972592/is-this-a-valid-and-correct-way-to-set-up-media-queries