手机浏览器的竖屏与横屏

**JS侦听**
//手机旋转
	window.addEventListener('orientationchange',function(){
	    console.log(window.orientation);
	});

**css 判断  在不同分辨率的情况下，使用不同的css样式**
<!--比例大于等于16：9 -->
<link rel="stylesheet" media="screen and (max-aspect-ratio: 16/9)" href="./css1.css" />
<!--比例小于16：9 -->
<link rel="stylesheet" media="screen and (min-aspect-ratio: 16/9)" href="./css2.css" />
@media screen and (orientation: portrait) {   
 /*竖屏 css*/  
@media screen and (orientation: landscape) {   
 /*横屏 css*/  
} 

扩展 @ （at-rule）
https://blog.csdn.net/weixin_34252090/article/details/86277330