Recently, I find myself doing CSS in a way that I really like. Not mobile first, not desktop first. I just go and do:
- Generic properties
- Add stuff for different screen sizes with breakpoints that make that specific design look good
So I will do something like:
.polaroid-cards {
display: grid;
}
/* Up until 860px */
@media (max-width: 860px) {
.polaroid-cards {
grid-template-columns: 1fr;
padding: 3rem;
}
}
/* From 860px on */
@media (min-width: 860px) {
.polaroid-cards {
grid-template-columns: 1fr 1fr;
padding: 3rem 15%;
}
}
And those rules are specific for that component. Other components may break at lower sizes or break three times, whatever is needed to make them look good.
Yeah well that was to give some context.
But the question I have is, regarding:
@media (max-width: 860px) { ...
@media (min-width: 860px) { ...
Is that okay?
Should it be?
@media (max-width: 859px) { ...
@media (min-width: 860px) { ...
I of course tested both versions and both work fine (apparently), but I want to understand the math behind this, and what internal rules the browser is applying, so I "help the browser" or at least don’t cause unexpected bugs.
>Solution :
min- and max-width are both inclusive, i.e. min-width: 860px means any screen that is 860px wide or wider. This means that
@media (max-width: 860px) { ...
@media (min-width: 860px) { ...
do overlap and the usual css precedence rules determine which to choose at a screen of width 860px exactly. So if you want to be absolutely, totally sure which rule will apply when, one should use 859px (or 861px).
Luckily, the Media Queries Level 4 spec, which is beginning to roll out to browsers, enables using regular comparison operators, making this cleaner and more obvious. You can then write
@media (width < 860px) { ...
@media (width >= 860px) { ...
And for three breakpoints, you can even do
@media (width < 860px) { ...
@media (860 <= width < 1080) { ...
@media (width >= 1080) { ...