CSS rem长度单位

时间：2023-03-09 21:54:17
CSS rem长度单位

1. 概述

1.1 说明

rem是css3中新增的一个单位属性(font size of the root element)，根据页面的根节点(html)的字体大小进行转换的单位，通过此单位属性可以进行自适应性布局开发。

1.2 示例说明

　　rem的初始值是16px，即默认值为1rem=16px;若在根节点html中设置了对应的font-size值，则1rem等于所设置的值，如下示例(html中font-size:100px，即1rem=100px)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <style>

    html,body{

      font-size: 100px;

    }

    div{

      width: 1rem;

      height: 1rem;

      background: red;

    }

  </style>

</head>

<body>

<div></div>

</body>

</html>

CSS rem长度单位

2. js页面计算rem

　　说明：使用以下js后，可以看到html对应的font-size的值是多少，此时1rem即为此font-size值。

window.onload = function() {

  /*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是为了好算*/

  getRem(750, 100);

};

window.onresize = function() {

  getRem(750, 100);

};

function getRem(pwidth, prem) {

  let html = document.getElementsByTagName('html')[0];

  let oWidth = document.body.clientWidth || document.documentElement.clientWidth;

  html.style.fontSize = oWidth / pwidth * prem + 'px';

}

　　

相关文章