今天小编跟大家讲解下有关使用css3匹配手机屏幕横竖状态 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用css3匹配手机屏幕横竖状态 的相关资料，希望小伙伴们看了有所帮助。
@media是css3中新定义的 功能非常强大 顾名思义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) { </p><p> body { background-color: #ff0000; } } @media all and (orientation : portrait){ </p><p> body { background-color: #00ff00; } }
3. 应用的地方
（1）手机WEB页面元素内容一般都是通过百分比定义的 以便能够在不同分辨率设备下都能正常显示 虽然这样 但是移动设备的屏幕分辨率宽度和高度相差还是很大 同样的页面在屏幕翻转过来时可能百分比定义的元素宽度会变得非常大 这样就会失去页面的美观性 这样 如果用orientation匹配屏幕的翻转状态 就可以写不同的css加以控制页面样式。
（2）对于有背景图的移动WEB页面 可以根据orientation匹配屏幕屏幕状态 设置不同的background。
（3）稍微有技术的一点：某些有绝对定位元素的WEB页面 将某元素定位到页面底部 当屏幕是竖屏状态时 可能因为页面总长度小于屏幕高度(但是大于屏幕宽度) 这时将绝对定位元素定位到底部是正确的 但是当屏幕翻转成为横屏时 此时因为页面内容高度大于屏幕高度(就是未翻转时屏幕宽度) 绝对定位元素会覆盖在页面内容之上 导致页面出现问题 这时可用orientation匹配屏幕状态 调整css代码。
关于匹配屏幕横竖屏状态还可通过JS判断 js中onorientationchange是window的一个事件 可以通过监听事件匹配屏幕横竖屏。
来源：爱蒂网
