css 通过rem和媒体查询配合适配各个设备浏览器

最新推荐文章于 2025-06-22 15:29:17 发布

h1lin0010

最新推荐文章于 2025-06-22 15:29:17 发布

阅读量4.3k

点赞数 1

本文介绍了一种使用CSS媒体查询进行响应式布局的方法，通过设置不同的屏幕宽度来调整HTML根元素的字体大小，从而实现对iPhone5、iPhone6、iPhone6 Plus、iPad及iPad Pro等不同尺寸设备的良好适配。

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

/*默认参照iphone6*/

html {
    font-size: 16px;
}
/*适配iphone5*/
@media screen and (max-width: 320px){
    html {
        font-size: 13.65px !important;
    }
}
/*适配iphone6plus*/
@media screen and (min-width: 376px) and (max-width: 414px){
    html {
        font-size: 17.66px !important;
    }
}
/*适配ipad*/
@media screen and (min-width: 415px) and (max-width: 768px){
    html {
        font-size: 32.76px !important;
    }
}
/*适配ipad pro*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
    html{
        font-size: 43.69px !important;
    }
}