CSS3匹配屏幕横竖状态

发布者: rightsndir | 发布时间: 2017-12-25 01:28| 查看数: 1778| 评论数: 1|帖子模式

@media是css3中新定义的，功能非常强大，下面简单讲解一下用css3的@media orientation匹配手机屏幕是横屏还是竖屏。

顾名思义PC是无法匹配横竖屏的，所以orientation只对移动设备起效。

1.头部声明
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">

加到<head></head>

2. media 匹配屏幕是横屏还是竖屏
@media all and (orientation : landscape) {

/*　　这是匹配横屏的状态，横屏时的css代码　　*/
    body {
        background-color: #ff0000;
    }
}
@media all and (orientation : portrait){

/*　　这是匹配竖屏的状态，竖屏时的css代码　　*/
    body {
        background-color: #00ff00;
    }
}

3. 应用的地方

（1）手机WEB页面元素内容一般都是通过百分比定义的，以便能够在不同分辨率设备下都能正常显示，虽然这样，但是移动设备的屏幕分辨率宽度和高度相差还是很大，同样的页面在屏幕翻转过来时可能百分比定义的元素宽度会变得非常大，这样就会失去页面的美观性，这样，如果用orientation匹配屏幕的翻转状态，就可以写不同的css加以控制页面样式。

（2）对于有背景图的移动WEB页面，可以根据orientation匹配屏幕屏幕状态，设置不同的background。

（3）稍微有技术的一点：某些有绝对定位元素的WEB页面，将某元素定位到页面底部，当屏幕是竖屏状态时，可能因为页面总长度小于屏幕高度(但是大于屏幕宽度)，这时将绝对定位元素定位到底部是正确的，但是当屏幕翻转成为横屏时，此时因为页面内容高度大于屏幕高度(就是未翻转时屏幕宽度)，绝对定位元素会覆盖在页面内容之上，导致页面出现问题，这时可用orientation匹配屏幕状态，调整css代码。

关于匹配屏幕横竖屏状态还可通过JS判断，js中onorientationchange是window的一个事件，可以通过监听事件匹配屏幕横竖屏。