css landscape code example
Example 1: css media query
@media (min-width: 576px) {
.selector {
background-color:#f00;
}
}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
Example 2: detect portrait landscape css
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
Example 3: css device orientation
@media screen and (orientation: portrait) {
#toolbar {
width: 100%;
}
}
@media screen and (orientation: landscape) {
#toolbar {
position: fixed;
width: 2.65em;
height: 100%;
}
p {
margin-left: 2em;
}
li + li {
margin-top: .5em;
}
}
Example 4: mediaquery for portrate
@media (orientation: portrait) {
body {
flex-direction: column;
}
}