EN
CSS - how to detect orientation for media queries?
1
answers
0
points
Is there any way to detect device orientation in CSS? I need it for media queries in my project.
Something like:
@media (width > height) {
/* ... */
}
1 answer
0
points
Quick solution:
@media (orientation: portrait) {
/* portrait styles here (width <= height) */
}
@media (orientation: landscape) {
/* landscape styles here (width > height) */
}
Practical example
In this example, div element background will be yellow on portrait orientation (vertical) and orange on landscape orientation (horizontal).
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
height: 500px;
}
@media (orientation: portrait) {
div {
background: yellow;
}
}
@media (orientation: landscape) {
div {
background: orange;
}
}
</style>
</head>
<body>
<div>Web page content here...</div>
</body>
</html>
References
0 comments
Add comment