CSS 適配裝置

/375 x 667 iPhone 6/
@media screen and (max-width: 375px) and (min-width: 320px){
—-樣式
}
/寬度小於500px時用以下樣式覆蓋原樣式以達到適配手機/
/414 x 736 iPhone 6P/
@media screen and (max-width: 500px) and (min-width: 375px){
}

/320 x 586 iPhone 5/
@media screen and (max-width: 320px){
}

@media all and (orientation : landscape) {

/*　　这是匹配横屏的状态，横屏时的css代码　　*/
body {

}
}
@media all and (orientation : portrait){

/*　　这是匹配竖屏的状态，竖屏时的css代码　　*/
body {
background-color: #00ff00;
}
}

JS也可以判斷橫屏還是豎屏 0为竖屏模式（portrait），-90意味着该设备横向旋转到右侧的横屏模式（landscape），而90表示该设备是横向旋转到左边的横屏模式（landscape）。
window.addEventListener(“orientationchange”, function() {
alert(window.orientation);//：0,90，-90
}, false);