css rem无效解决方法

最新推荐文章于 2024-07-09 15:59:19 发布

某柚啊

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量1w

点赞数 5

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/sinat_35026778/article/details/105840058

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题描述

当使用 rem 作为单位时，页面在自己浏览器上查看样式正常显示，到了别的浏览器显示就不对了。

原因

首先需要明白 rem 的实质，博客千千万，就不赘述了，随便贴一个：CSS 动态REM

rem 是相对于页面根字体的单位，根据 <html> 的 font-size 进行计算得到实际长度。一些浏览器对于 字体小于12px 的情况统统处理成 12px，所以如果根字体大小被设为小于12px的值，很可能显示就会出现问题。

举个栗子，一般移动端设计稿宽度是 750px，浏览器默认的根字体大小是 16px，所以如果设置 1rem = 16px，其他设备根据实际大小进行缩放（媒体查询），如 iPhone 7（dpr = 2）的宽度是 375px，则在此设备下有 1rem = 8px；以此类推，以下是媒体查询写法：

@media screen and (min-width: 320px){
    html {
        font-size: 43% !important; 
    }
}

@media screen and (min-width: 360px){
    html {
        font-size: 48% !important; 
    }
}

@media screen and (min-width: 375px){
    html {
        font-size: 50% !important; 
    }
}

@media screen and (min-width: 414px){
    html {
        font-size: 54.8% !important; 
    }
}

@media screen and (min-width: 750px){
    html {
      font-size: 100% !important; 
    }
}

@media screen and (min-width: 1024px){
    html {
        font-size: 138% !important;
    }
}

但这种换算方法对于dpr = 1的情况适用。而一般我拿到的设计稿是 750px，750px 设计稿是在以dpr=2为基准，所以在原设备画布大小的基础上乘以2（根字体大小也是实际大小的2倍）。所以，对于Retina（dpr > 2）设备（一般认为 dpr = 2），需要将设计稿宽度除以dpr，再使用 rem 进行换算。

解决方法

方法很简单，将根字体的大小扩大，这就将物理像素和设备独立像素之间的换算也加了进去，然后再进行 rem 与 px 之间的换算。

/* 1rem = 32px */
@media only screen and (min-width: 320px){
    html {
        font-size: 86% !important; 
    }
}

@media only screen and (min-width: 360px){
    html {
        font-size: 96% !important; 
    }
}

@media only screen and (min-width: 375px){
    html {
        font-size: 100% !important; 
    }
}

@media only screen and (min-width: 414px){
    html {
        font-size: 109.6% !important; 
    }
}

@media only screen and (min-width: 750px){
    html {
      font-size: 200% !important; 
    }
}

@media only screen and (min-width: 1024px){
    html {
        font-size: 138% !important;
    }
}

当然，rem 本身就是相对单位，换算比例可以自行设置。

感谢

从设备像素比到移动适配

px / rem 转换插件

另外，强推一个 vscode 的插件：px to rem，可以十分方便使用快捷键在 px 和 rem 之间转换~

某柚啊

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css rem无效解决方法

问题描述当使用 rem 作为单位时，页面在自己浏览器上查看样式正常显示，到了别的浏览器显示就不对了。原因首先需要明白 rem 的实质，博客千千万，就不赘述了，随便贴一个：CSS 动态REMrem 是相对于页面根字体的单位，根据 <html> 的 font-size 进行计算得到实际长度。一些浏览器对于字体小于12px 的情况统统处理成 12px，所以如果根字体大小被设为小于1...
复制链接

扫一扫