CSS Media Queries

by wittnl

HTML

<p class="landscape">Landscape</p>
<p class="portrait">Portrait</p>

CSS

.landscape, .portrait {
    display: none;
}

@media (min-aspect-ratio: 4/3) {
    .landscape {
        display: block;
    }
}

@media (max-aspect-ratio: 3/4) {
    .portrait {
        display: block;
    }
}