@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 ){}

3. 还有就是iphone6/7/8 Plus

1. @media screen and (max-width:414px ){}
2. @media screen and (max-height:736px ){}

4. iPhone XS: 5.8 英寸

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

5. iPhone XR: 6.1 英寸

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2){}

6. iPhone XS Max: 6.5 英寸

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3){}

@media screen and (max-width:768px ) {
    width: 100%;
    transform: scale(0.8) translateZ(0)
}

获取屏幕尺寸

// 屏幕可以大小
screen.availWidth+"/"+screen.availHeight
// 屏幕分辨率
screen.width+"/"+screen.height
// 网页可见区域
document.body.clientWidth +"/"+ document.body.clientHeight
// 网页可见区域(包括边线的宽)
document.body.offsetWidth +"/"+ document.body.offsetHeight