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

获取屏幕尺寸

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

你可能感兴趣的:(@media 移动端屏幕适配)