CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。
前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：
我们来看一个简单的代码实例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。
浏览器的兼容性
rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法，你们就把他们当透明了吧，我向来都是如此。
不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
转自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem
相关推荐
<div style="font-size: 2rem;"> <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing </div>
p { font-size: rem(20); // --> font-size: 1.25rem line-height: rem(40); // --> line-height: 2.5rem}div { padding: 0 rem(50); // --> padding: 0 3.125rem margin: rem(20) rem(50); // --> ...
为了解决这类问题，我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值。 下面是相关JavaScript的实现代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = '...
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。... font - size : 2rem; line-height : 1.2
font-size : rem ( 24 px ); /* Simple */ padding : rem ( 5 px 10 px ); /* Multiple values */ margin : rem ( 10 px 0.5 rem ); /* Existing rem */ border-bottom : rem ( 1 px solid black ); /* Multiple...
注意：这个仓库已被转移到萨斯集体monorepo，用这个包，这个完全弃用之前。 介绍 Sass函数和mixin生成rem值。 安装 npm install @sass-collective/sass-rem --save ... font-size : sass-rem . rem ( 16 );
<!DOCTYPE html> <meta charset="UTF-8"> 随机点名 body { margin: 0; padding: 0;... font-size: 4rem; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.5); margin-bottom: 1rem; } #name
postcss-plugin-pxtoviewport用法配合postcss可以使px转为vw和rem输入/输出可以通过配置参数，实现px同时转为vw和rem... font-size: 2rem; font-size: 8.53333vw; line-height: 1.2; letter-spacing: 1px;}参数Type: Ob
font-size: 1.4rem; color: var(--inv); letter-spacing: 1.1rem; text-transform: uppercase; -webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 600ms cubic-bezier(0.77, 0,...
代码片段： section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center;... font-size: 2rem; min-height: 100%; height: 100vh; }
JavaScript实现移动端签字功能 本文实例为大家分享了JavaScript实现...font-size: 1.2rem;">验收人签字:</font></div> </div> <div class="mui-content-canvasDiv" style="overflow: hidden;"> <canvas id="my
font-size: 0.32rem; line-height: 1; } adaptivejs原理： 利用rem布局，根据公式 html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度 设置html元素的font-size,然后根据设计图大小/100即...
<div style="font-size: 2rem;"> <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing </div>
.user-address {font-size:12px ;} .am-thumbnails {margin:0px 0px ;margin-bottom: 50px;} .user-address li.user-addresslist {float: none;min-height:80px ;position: relative;border-bottom:1px solid #eee ;...
postcss-解析-prop 用于解决规则属性值的辅助方法。介绍该项目公开了一个单一的函数，该... a {font-size : 1 rem ;font : 1.2 rem serif;} 让我们获取font-size ： resolveProp ( rule , 'font-size' , {parsers :
font-size：1rem; line-height：2rem; position：relative; transition：0.5s;}＃forkongithub a：hover {background：＃c11; color：#fff;}＃forkongithub a :: before，＃forkongithub a： ：after {content：“”...
媒体查询插件 您是否曾经考虑过从CSS... bar { font-size : 1 rem } 他只需要总是加载这个 . foo { color : red } . bar { font-size : 1 rem } 在桌面视口上的大小另外 @media print , screen and ( min-width : 75
font-size: 120px !important; } 但是在page2引用的self.less里面设置了基准，竟然没有生效 2、问题分析scoped属性 在引用self.less的时候，使用了属性scoped vue中引入了scoped这个概念，设计思想就是让当前组件...
font-size : 1 rem ; line-height : 1.5 rem ; } . xxl { typescale : 3 2 ; } . xl { typescale : 2 1.5 ; } . l { typescale : 1 1.5 ; } . m { typescale : 0 1 ; } . s { typescale : -1 1 ; } . xs { ...
.timetextintro{font-size: 0.22rem;margin-bottom: 10px;color: #fff;padding: 0 1.52rem;box-sizing: border-box;} .timecounter{font-size: 0.6rem;} .txt{padding: 0 0.2rem;box-sizing:border-box;} .clearbg5{...