@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 *//* Max-width */
@media only screen and (max-width: 600px) {...}
/* Min-width */
@media only screen and (min-width: 600px) {...}
/* Combining media query expressions */
@media only screen and (max-width: 600px) and (min-width: 400px) {...}@media screen and (min-width: 200px) and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}@media (max-width: 989px) and (min-width: 768px) {}@media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
/*
# 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;
}
}@media only screen and (max-width: 535px), screen and (max-height:550px ) {
}/* 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) {...}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 !!!@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}