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
/* 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) { }
xxxxxxxxxx
@media screen and (min-width: 200px) and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}
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
/*
# 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
@media only screen and (max-width: 535px), screen and (max-height:550px ) {
}
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 */