Here is what I’ve done in my projects: @desktop: ~”only screen and (min-width: 960px) and (max-width: 1199px)”; @tablet: ~”only screen and (min-width: 720px) and (max-width: 959px)”; @media @desktop { footer { width: 940px; } } @media @tablet { footer { width: 768px; } } This allows you to only define your media queries once and … Read more
2 Part Answer Part 1: To answer “why people are using min-width over max-width?”: It has to do with design flow. Typically, with min-width patterns, you’re designing mobile-first. With max-width patterns, you’re design desktop-first. Going mobile-first with min-width, the default style is the mobile style. Queries after that then target progressively larger screens. body { … Read more
That’s by design of CSS — Cascading Style Sheet. It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less … Read more
Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel Open Developer tools (otherwise the key combination below opens the print dialog) Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac) Type “Show rendering” Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug
What are the rules for CSS media query overlap? Cascade. @media rules are transparent to the cascade, so when two or more @media rules match at the same time, the browser should apply the styles in all the rules that match, and resolve the cascade accordingly.1 What will happen, across all supporting browsers, at exactly … Read more
Do I need to double the size of the .box div to 400px by 400px to match the new high res background image No, but you do need to set the background-size property to match the original dimensions: @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{ background:url(‘images/box-bg@2x.png’) no-repeat top left; background-size: 200px 200px; } } EDIT … Read more
The @media query specifically for ‘phones’ is.. @media (max-width: 480px) { … } But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px. Here are some queries that have worked (in most cases) for me: @media (max-width: 978px) { … Read more
The simple answer is: you can’t because Sass can’t (or won’t) compose the selector for it. You can’t be inside of a media query and extend something that’s outside of a media query. It certainly would be nice if it would simply take a copy of it instead of trying to compose the selectors. But … Read more
I fixed this problem by adding a meta tag to my page: <meta name=”viewport” content=”width=device-width”> UPDATE (December 2019): It looks like you may also need to set the initial scale and minimum scale, like so: <meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1″ />
Another useful media feature is device-aspect-ratio. Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71. iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {} iPhone 5: @media screen and (device-aspect-ratio: 40/71) {} iPhone 6: @media screen and (device-aspect-ratio: 375/667) {} iPhone 6 Plus: @media screen and (device-aspect-ratio: … Read more