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?
-
stackoverflow.com/a/62838844/12910765 this will help in finding current screen size for media queryRana Nadeem– Rana Nadeem2020-07-10 16:48:42 +00:00Commented Jul 10, 2020 at 16:48
Add a comment
|
4 Answers
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.
Comments
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.
7 Comments
benhowdle89
Ah, thanks for the detailed answer, so a CSS only solution to grab screen size is a no-no?
Chris
The benefit of media queries is that you can react to specific attributes of the viewport, so while you can't determine its exact size, you can adjust your content's representation by predicting and accounting for the viewport being within certain expected boundaries.
Chris
You may find alistapart.com/articles/responsive-web-design to be an informative read.
Madara's Ghost
That's not true. You have
device-widthMadara's Ghost
Or maybe I misinterpreted the answer? Now I'm confused :X
|
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)
Comments
In html ->
<meta name="viewport" content="width=device-width">OR
In CSS ->
@viewport {
width: device-width;
}Hope it helped.
