Determining Screen Width Using CSS Media Queries

Question

I assume you can do this with Media Queries:

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

At some point, the CSS stylesheet should know how wide the screen is without Javascript.

In this case?

Answer 1

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

---

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

Leadership reference

Answer 2

When the browser window of the browser changes its size, the browser will repaint the visible area. At this point, the browser will check if there are media query styles relevant to the new viewport.

CSS does not know how wide the browser viewing area is, since the browser knows that CSS is applicable for a particular viewport.

Answer 3

In html →

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

OR

In CSS →

 @viewport { width: device-width; } 

Hope this helps.

Answer 4

Well...

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

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

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