CSS区分横屏和竖屏

如何区分横屏和竖屏， 在CSS中？

//竖屏

@media screen and (orientation:portrait) {
    div {
        background-color:red;
    }
}

//横屏

@media screen and (orientation:landscape) {
    div {
        background-color:red;
    }
}