video-07-js/css judging method for vertical screen and horizontal screen

It's very weird, we need to adapt, sometimes we need to consider whether it is a horizontal screen or a vertical screen, and make the style compatible! !

 Two adaptation methods are described below

Table of contents

1. css

Two, js

---

1. css

@media screen and (orientation: portrait) {
	  /*竖屏...*/
} 
@media screen and (orientation: landscape) {
	  /*横屏...*/
}

Two, js

window.onload = function(){ //初次加载
	isD();
}
window.addEventListener("resize", function(){ //屏幕宽度发生变化
    isD();
});
function isD(){
	if (window.orientation === 180 || window.orientation === 0) { 
      // 正常方向或屏幕旋转180度
        console.log('竖屏');
    };
    if (window.orientation === 90 || window.orientation === -90 ){ 
       // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
        console.log('横屏');
    }  
}