前端笔记（一）——媒体查询

最新推荐文章于 2025-05-23 11:12:45 发布

weixin_30279751

最新推荐文章于 2025-05-23 11:12:45 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/zhaoyingzhen/p/10634759.html

本文分享了针对iPhoneX及iPhoneXr的适配方法，通过CSS媒体查询精确设置不同设备屏幕下的样式参数，确保应用在全面屏手机上拥有良好的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、iPhone X适配

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .videoTitleBox {
        margin-top: 0.6rem;
    }
}

2、iPhone Xr适配

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .videoTitleBox {
        margin-top: 0.6rem;
    }
    .video_box {
        height: 28.5%;
    }
}

转载于:https://www.cnblogs.com/zhaoyingzhen/p/10634759.html