video-07-js/css método de evaluación para pantalla vertical y pantalla horizontal

Es muy raro, tenemos que adaptarnos, a veces tenemos que considerar si es una pantalla horizontal o una pantalla vertical, ¡y hacer que el estilo sea compatible! !

 A continuación se describen dos métodos de adaptación.

Tabla de contenido

1. CSS

dos, js

---

1. CSS

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

dos, 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('横屏');
    }  
}