Media Query About Screen Size Instead of Resolution

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).

Why CSS Media Queries look different even though screens have the same resolution

add this in your head tag

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

CSS media queries break at 5 specific resolution sizes....what?

the spec says that viewport width can potentially be calculated as a fractional value due to zooming, hidpi, etc. since your media queries specify bounded ranges, and there are holes in between those ranges, it's possible for certain viewports to not match any media queries at all.

since you're using the same set of selectors and rules inside of each media query, you don't need max-width at all; just use min-width and let the CSS engine do the rest.

Higher resolution media query overrides lower resolution media query

@media(max-width: 640px) applies to all sizes 640px and below, so the styles specified in this media query will also be applied to screen widths of 320px. Media queries do not increase the specificity of the CSS rules within. Because your @media(max-width: 640px) media query comes after @media(max-width: 320px), the rules or equal specificity in the larger media query will override those in the smaller media query.

The simplest fix would be to order your media queries from the largest screen size to smallest.

If you need more control, you can limit your media query to screens within a range of sizes using a combination of min-width and max-width.

@media (min-width:320px) and (max-width: 640px) {
}

Using @media queries for different screen-sizes not working properly

You have violated some indentation rules on the bottom block. Make sure to set correct indentation when nesting as you have done in top block.

Media query not working properly for defined screen size

The key to develop your website as a responsive one is using "rem" instead of px, for almost everything as in for font sizes, padding, etc. And change the root font size for different media queries, and voila it's much easier!

I learned this the hard way but worth it!

---

Related Topics