@media 移動端螢幕適配

我們經常適配的移動端手機尺寸

1. 最小螢幕尺寸一般以iphone4為首選，注意iphone5/SE的width是一樣的

// 特殊場景，寫法不一，比如：
1. @media screen and (max-width:320px ){}
2. @media screen and (max-height:480px ){}
3. @media screen and (max-width:320px ) and (max-height:480px ){}
複製程式碼

2. 還有就是iphone6/7/8

// 有時候我們只需要獲取width 或者height 其中一個即可
1. @media screen and (max-width:375px ){}
2. @media screen and (max-height:667px ){}
複製程式碼

2. 還有就是iphone6/7/8 Plus

1. @media screen and (max-width:414px ){}
2. @media screen and (max-height:736px ){}
複製程式碼

2. 還有就是iphoneX

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){}
複製程式碼

獲取螢幕尺寸

// 螢幕可以大小
screen.availWidth+"/"+screen.availHeight
// 螢幕解析度
screen.width+"/"+screen.height
// 網頁可見區域
document.body.clientWidth +"/"+ document.body.clientHeight
// 網頁可見區域(包括邊線的寬)
document.body.offsetWidth +"/"+ document.body.offsetHeight
複製程式碼