css 横屏幕 竖屏幕开发

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

//竖屏
Css代码 

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

//横屏
Css代码 
@media screen and (orientation:landscape) {  
    div {  
        background-color:red;  
    }  
}