css媒体查询适配备忘

最新推荐文章于 2024-08-16 08:15:00 发布

肥喵蒙太奇

最新推荐文章于 2024-08-16 08:15:00 发布

阅读量356

点赞数

分类专栏：备忘录 css

本文链接：https://blog.csdn.net/YYYYYun/article/details/102888856

版权

备忘录同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

// iphone X, iphone Xs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {...}
// iphone Xs max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {...}
// iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {...}
// iphone 4, iphone 4s
@media (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {...}
// iphone 5, iphone 5s
@media (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {...}
// iphone 6, iphone 7, iphone 8s
@media (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {...}
// iphone 6 Plus, iphone 7 Plus, iphone 8 Plus
@media (device-height: 736px) and (-webkit-device-pixel-ratio: 2) {...}
// 横屏
@media all and (oriendation: landscape) {...}
// 竖屏  
@media all and (orientation: portrait) {...}

// 一些宽度
console.log('client',document.body.clientWidth, document.body.clientHeight)
console.log('offset',document.body.clientHeight)
console.log('物理屏幕',window.screen.width,window.screen.height)
console.log('可用工作区',window.screen.availWidth, window.screen.availHeight, )
console.log('缩放比例',window.devicePixelRatio)