使用CSS3来匹配横屏竖屏的简单方法

使用CSS3来匹配横屏竖屏的简单方法

写在同一个CSS中
 
CSS Code复制内容到剪贴板

1. @media screen and (orientation: portrait) {   
2.   /*竖屏 css*/  
3. }    
4. @media screen and (orientation: landscape) {   
5.   /*横屏 css*/  
6. }  

分开写在2个CSS中
竖屏
 

CSS Code复制内容到剪贴板

1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  

横屏
 

CSS Code复制内容到剪贴板

1. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">  

应用的地方

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

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

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

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