css rem及rem工具的使用

最新推荐文章于 2025-07-03 00:34:13 发布

weixin_33766168

最新推荐文章于 2025-07-03 00:34:13 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/SZQing/blog/1624379

本文介绍了REM单位的基本原理及如何应用于响应式布局中。详细解释了REM单位在根元素和非根元素上的表现，并提供了具体的适配设置案例。此外，还介绍了如何利用rem-unit工具进行高效开发。

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

为什么80%的码农都做不了架构师？>>>

一、rem原理

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

rem取值分为两种情况，设置在根元素时和非根元素时，举个例子

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}

/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}

二、font-size适配设置

/*font-size适配设置*/

@media screen and (min-width: 320px) {
  html,
  body {
    font-size: 12px;
  }
}

@media screen and (min-width: 360px) {
  html,
  body {
    font-size: 13.5px;
  }
}

@media screen and (min-width: 375px) {
  html,
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 414px) {
  html,
  body {
    font-size: 15.5px;
  }
}

@media screen and (min-width: 720px) {
  html,
  body {
    font-size: 27px;
  }
}

三、rem-unit工具的使用

设计师给出的设计稿：

eg.

宽度1080px / 3倍屏 = 360 （安卓机）
在360屏幕宽度下，此时的根节点font-size为多少，如13.5px
那么rem-unit工具中的配置如下：

{

    "fontsize": 40.5,

    "precision": 2,

    "leadingzero": false,

    "exts": [".css", ".scss", ".less", ".sass", ".styl",".vue"]

}

即 fontsize设为 13.5px*3倍 = 40.5

4.用pxcook工具量出来是多少px，就写多少px，用rem-unit转即可，单位rem。

转载于:https://my.oschina.net/SZQing/blog/1624379