Detect screen width with CSS Media Queries

问题

I'm guessing that because you can do this with Media Queries:

@media (min-width:500px) { … }

That at some point or another, the CSS stylesheet must know what width the screen is, sans Javascript.

Is this the case?

回答1:

You can use device-width which will test of the screen's width in px. That however is not entirely recommended. Use max-width and min-width (for the viewport) instead.

If you are trying to GET the screen width and use it (something like content: (device-width); of some sort, that's not possible. Stick with JavaScript.

Manual Reference

回答2:

As the client browser's viewport changes size, the browser will repaint the visible area. At that point in time the browser will be checking if there are media query styles that are relevant for the new viewport.

The CSS doesn't really know what width the browser's viewport is, so much as the browser knows what CSS is applicable for a specific viewport.

回答3:

Well...

@media(width:1024px){
  p#id:after{
    content:"1024px";
  }
}

If the width of the viewport is 1024 pixels, this displays the text "1024px" after the designated <p> element. You could (hypothetically) put several thousands of such blocks of CSS to display the width of the viewport, for any reasonable value of its width. (Note that the text isn't selectable in some browsers.)

The more you know... (please don't actually do this)

回答4:

In html ->

<meta name="viewport" content="width=device-width">

In CSS ->

@viewport {
  width: device-width;
  }

Hope it helped.

来源：https://stackoverflow.com/questions/7050696/detect-screen-width-with-css-media-queries

标签

css

media-queries