WebApp开发中的rem.js

最新推荐文章于 2020-07-29 17:15:03 发布

默默的小跟班

最新推荐文章于 2020-07-29 17:15:03 发布

阅读量235

点赞数

分类专栏： Vue 文章标签： css javascript vue web app

原文链接：https://blog.csdn.net/qq_36263601/article/details/78366710

版权

Vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

简单的rem.js代码

(function () {
  function a() {
    // clientWidth=width(样式中设置的)+左padding+右padding-垂直滚动条宽度。
    var b = document.documentElement.clientWidth;
    b = b > 750 ? 750 : b;
    var c = b / 750 * 100;
    // document.getElementsByTagName("html")[0] = <html>   就是html这个大标签
    document.getElementsByTagName("html")[0].style.fontSize = c + "px"
  }

  a();
  window.onresize = a
// onresize 事件会在窗口或框架被调整大小时发生。
// HTML 中: <element οnresize="SomeJavaScriptCode">
// JavaScript 中:window.οnresize=function(){SomeJavaScriptCode};
})();

关于rem.js的理解

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

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

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

rem有rem的优点，em有em的优点，

假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比

p {width: 50x} /* 屏幕宽度的50% */

如果想要页面元素随着屏幕宽度等比变化，我们需要上面的x单位，不幸的是css中并没有这样的单位，幸运的是在css中有rem，通过rem这个桥梁，可以实现神奇的x

通过上面对rem的介绍，可以发现，如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生变化

html {font-size: 16px}
p {width: 2rem} /* 32px*/
 
html {font-size: 32px}
p {width: 2rem} /*64px*/
如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem和1x就等价了

html {fons-size: width / 100}
p {width: 50rem} /* 50rem = 50x = 屏幕宽度的50% */