tablet breakpoints css 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 css for all devices
@media (min-width: 600px) and (max-width: 800px) {
/* your css code here */
/* html { background: red; } */
}
Example 3: iphne media query csss
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
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
}