移动端屏幕旋转事件和样式方案。

当用户在移动端体验产品时,会触发手机系统的横屏指令,我们给window.orientation取值,正负90表示横屏模式、0和180表现为竖屏模式;

indow.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("我现在是横屏:" + window.orientation);
        case 0:
        case 180:
        alert("我现在是竖屏:" + window.orientation);
        break;
    }
}   

样式可以用@media 去写:

//竖屏时使用的样式
@media all and (orientation:portrait) {
    body{
        background:red;
    }
}
 
//横屏时使用的样式
@media all and (orientation:landscape) {
    body{
        background:blue;
    }   
}

 

 
posted @ 2018-05-15 14:37  呼啦啦呜啦啦  阅读(190)  评论(0编辑  收藏  举报