@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
複製代碼