media query mobile devices only code example
Example 1: media query for mobile view css
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Example 2: media query desktop
@media only screen and (max-width: 600px) {...}
@media only screen and (min-width: 600px) {...}
@media only screen and (min-width: 768px) {...}
@media only screen and (min-width: 992px) {...}
@media only screen and (min-width: 1200px) {...}
Example 3: media queries css not working for mobile
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Example 4: css media queries laptop
@media (max-width: 767px) {
.container{width:100%} *{color:green;}-Mobile
}
@media (min-width: 768px) {
.container{width:100%} *{color:pink } -Desktop
}
@media (min-width: 768px) and (orientation:portrait) {
.container{width:100%} *{color:yellow } -Mobile
}
@media (min-width: 1024px) {
.container{width:100%} *{color:pink } -Desktop
}
@media (min-width: 1200px) {
.container{width:1180px} *{color:pink } -Desktop
}