媒体查询无效

Question

I have this simple media queries:

@media screen and (min-width: 1440px) and (max-width: 1600px) {

   body {
      font-size: 14px;
   }

}

But this just doesn't work. My screen resolution is 1600x900, so it should work, I think. What the hell is wrong here? I put this on the end of .css file, I added

<meta name="viewport" content="width=device-width,initial-scale=1.0">

to the HTML file... I don't know what else should i do to make this working.

Answer 1

min-width and max-width refer to the width of the window , not of the screen . @media screen means that the styles apply to the "screen" medium (as opposed to the "print" medium for example).

To target the resolution, you can use min-resolution and max-resolution .