一次性理解清楚动态rem

2024年3月17日 130次阅读 来源: Caddo

前言

总是看到em、rem、动态rem，究竟他们的区别是什么呢？

单位

  • px：像素
  • em：一个 M 的宽度（面试：一个字的宽度）
  • rem：root em 根元素（<html>）的 font-size
  • vh：view height，视口高度 100vh === 视口高度
  • vw：view width，视口宽度 100vw === 视口宽度

由上述可知，rem和em根本没有任何联系。
特别注意的是，浏览器默认 font-size:16px;Chrome浏览器默认最小字号为12px：font-size:12px;所以一般情况下，rem 的font-size不要小于12px;

动态rem

动态rem其实是为移动端适配而诞生的。动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem，之后的布局单位全部使用rem来实现整体缩放。

使用方法

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;} body{font-size:16px;}</style>')
 </script>

值得注意的是，pageWidth根据实际情况可以适当的缩小（如0.1倍），但是要特别注意缩小后会不会小于浏览器规定的最小字体。在使用动态 rem 布局的移动端页面中，单位可以混用，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。

    原文作者：Caddo
    原文地址: https://segmentfault.com/a/1190000020009222
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞