How to determine if a device is in portrait or landscape mode using CSS

Question

For determining screen size I'm using media queries but I want determine if a device is in portrait or landscape mode using CSS so that I can have different background image as per screen size.

Any thoughts?

Answer 1

simply write media queries for landscape and portrait modes:

/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
}

link here