• 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{
           1rem;
          height: 1rem;
          background: red;
        }
      </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

     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';
    }
    

      

  • 相关阅读:
    关于sql的对称性密钥和非对称性密钥(基础)
    Thinking in life(1)
    java集合类(三)About Iterator & Vector(Stack)
    java集合类(二)List学习
    How does java technology relate to cloud computing?
    Java 集合类(一)
    Snapchat
    Oppotunity land---China
    Learn know more about big data
    About the Storage allocation
  • 原文地址:https://www.cnblogs.com/ajuan/p/10143939.html
Copyright © 2020-2023  润新知