如何使用css3匹配手机屏幕横竖状态

这篇文章主要讲解了“如何使用css3匹配手机屏幕横竖状态”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用css3匹配手机屏幕横竖状态”吧！

创新互联专注于五华网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供五华营销型网站建设，五华网站制作、五华网页设计、五华网站官网定制、小程序制作服务，打造五华网络公司原创品牌,更为您提供五华网站排名全网营销落地服务。

@media是css3中新定义的，功能非常强大，顾名思义PC是无法匹配横竖屏的，所以orientation只对移动设备起效。

1.头部声明

代码如下:

加到

代码如下:

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的一个事件，可以通过监听事件匹配屏幕横竖屏。

感谢各位的阅读，以上就是“如何使用css3匹配手机屏幕横竖状态”的内容了，经过本文的学习后，相信大家对如何使用css3匹配手机屏幕横竖状态这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！