How Is The Screen Size Measured for Media Queries

Media query about screen size instead of resolution

Well, for starters, the CSS pixel is an angular measurement and is decently normalized between devices. Not entirely, but enough so for this to be a non-issue in most cases.

Personally I measure media queries in ems so that they're relative to my font size. I mean, people usually visit a web site to read the text found on the website, so as long as there's a reasonable amount of words per line I'm satisfied.

You really shouldn't measure with physical (device) widths because people may have UI elements taking up space (or simply not run their browsers in full screen).

Detect screen width with CSS Media Queries

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

CSS media queries ( media screen )

1) screen here means the screen of the device itself (not a print as print is the common one). But this has same effect as

@media (min-width: 312px)

Just you are specifying that you want the max-width of the screen on that the website loaded, that's it

2) the max means the maximum width of the device screen to which the following styles are applied.

for eg:

@media screen and (max-width: 768px){
  //These styles will apply only if the screen size is less than or equal to 768px
}

3) There is no termination. If you have max and min with 600px, then the styles will applied as per the position of the code. The code that comes below will apply (if min code is at line number 10 and max code at line number 20 then max will work)

---

Related Topics