xxxxxxxxxx
@media screen and (min-width: 768px) {
/* CSS rules for screens wider than 768px */
}
/* Example usage */
.box {
background-color: yellow;
}
@media screen and (min-width: 768px) {
.box {
background-color: blue;
}
}
xxxxxxxxxx
/* Styles for devices with width between 600px and 900px */
@media screen and (min-width: 600px) and (max-width: 900px) {
/* Add your styles here */
body {
background-color: lightblue;
}
}
/* Styles for devices with width greater than or equal to 1200px */
@media screen and (min-width: 1200px) {
/* Add your styles here */
body {
background-color: lightgreen;
}
}
xxxxxxxxxx
/*
# ref: https://www.w3schools.com/css/css3_mediaqueries_ex.asp
- On screens that are 992px or less, set the background color to blue
- Smaller screens
*/
@media screen and (max-width: 400px) {
body {
background-color: blue;
}
}
/*
- On screens that are 992px or more, set the background color to red
- Larger screens
*/
@media screen and (min-width: 992px) {
body {
background-color: red;
}
}
xxxxxxxxxx
@media only screen and (min-width: 600px) and (max-width: 1200px) {
/* CSS rules to apply for screens with a width between 600px and 1200px */
/* e.g., styling specific to tablets or smaller desktop screens */
}
xxxxxxxxxx
/* What this query really means, is If [device width] is less than or equal to 600px, then do */
@media only screen and (max-width: 600px) { }
/* What this query really means, is If [device width] is greater than or equal to 600px, then do */
@media only screen and (min-width: 600px) { }
xxxxxxxxxx
@media only screen and (max-width: 600px) { }
/* [device width 📱] is less than or equal to 600px = max-width */
@media only screen and (min-width: 700px) { }
/* [device width 📱] is greater than or equal to 700px = min-width */
xxxxxxxxxx
when you are writing mobile first, what you want to do is use all min-width
media queries the whole way through, So you start with your declarations outside
of the media queries,
thats your mobile styles.
And then you are going to change whatever needs changing through the
media queries and you
use min-width because that pulls in the styles outside the media query,
pulls those styles, they are still valid when get into the next media query
and they are still valid all the way
through the document until you reset/overwrite a value somewhere along the way.
** So that is min-width..
-----------------------------------------------------------------------------------------
Max-width are what you would use if you wanted to go desktop first, In other
words, all the styles outside of it are desktop styles, and then we are going
to cut off whatever those styles are at various breakpoints by using
max-width media queries.
-----------------------------------------------------------------------
Generally speaking today people write mobile first for the most part, but
sometimes desktop first may make sense if you have just complicated desktop.
------------------------------------------------------------------------
Happy Coding !!!