css screen width code example
Example 1: media query
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Example 2: css media query
@media (min-width: 576px) {
.selector {
background-color:#f00;
}
}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
Example 3: css different sreen size
@media screen and (max-width: 540px) {
.view {
width: 400px;
}
}
@media screen and (min-width: 540px) and (max-width: 780px) {
.view {
width: 600px;
}
}
Example 4: minimum width of different devices in html
body {
background: white;
}
@media screen and (min-width: 980px) {
body {
background: red;
}
}
@media screen and (max-width: 979px) {
body {
background: blue;
}
}
@media screen and (max-width: 500px) {
body {
background: green;
}
}
Example 5: css media screen
@media (max-width: 991px){
.mobile{
display: block;
}
}
Example 6: width in % of a screen css
1vw = 1% of viewport width
1vh = 1% of viewport height