xxxxxxxxxx
@media screen and (min-width:700px) {
} //this means the above media queriy will apply if the screen has a minimum screen width
//of 700px., meaning screens with screen sizes of 700px and above will be affected by the above media query
xxxxxxxxxx
@media only screen and (max-width: 600px) {
your css here and you're good to go!
}
xxxxxxxxxx
/* CSS media query for mobile devices */
@media only screen and (max-width: 767px) {
/* Add your mobile-specific CSS styles here */
body {
background-color: #f2f2f2;
font-size: 14px;
}
/* ... */
}
xxxxxxxxxx
@media screen and (min-width: 400px) { }
@media screen and (min-width: 600px) { }
@media screen and (min-width: 1000px) { }
@media screen and (min-width: 1400px) { }
xxxxxxxxxx
/* Default media */
body {
background: #ddd;
}
/* Media for larger devices */
@media screen and (min-width: 800px) {
body {
background-image: url("bg.png") 50% 50% no-repeat;
}
}