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
相关推荐
为了解决这类问题，我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值。 下面是相关JavaScript的实现代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = '...
`grunt-px2rem-master`则是这个插件的主分支或最新版本的压缩包。 **一、px与rem单位** 1. **px（像素）**：像素是CSS中最基本的长度单位，它是一个绝对单位，代表显示器上一个点。在非Retina屏幕或不开启设备像素...
<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); // --> ...
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...
总之，通过`postcss-px2rem`插件和动态设置`html`的`font-size`，我们可以有效地实现页面的自适应布局，使得UI在不同设备上都能保持良好的视觉效果。在使用`vue-mobile-template`这样的模板时，开发者可以直接利用...
<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>
当这个Less文件被编译成CSS后，变量和计算会被替换为实际的值，这样我们就可以在不同设备上动态调整`@base-font-size`，从而改变所有基于rem的元素的大小。 在这个京东手机端的示例中，"jd"很可能是指京东的样式...
在CSS中，我们可以设置html元素的`font-size`属性来定义REM单位的基础值。例如，如果设置`html { font-size: 10px; }`，那么1rem就等于10像素。在不同分辨率的设备上，我们可以根据屏幕宽度动态调整这个基础值，从而...
@include rem(font-size, 14px); @include rem(padding, 10px, 10px); // 兼容不支持rem的浏览器 ``` ### 3. 自定义根元素字体大小 `sass-rem`默认假设根元素的字体大小是16px。但你可以通过设置全局变量`$...
例如，对于小屏幕设备，可以将font-size设置为较小的值，这样所有使用REM单位的元素都会相应地缩小。 REM布局的优势： 1. 一致性：通过统一的根元素字体大小，可以保持页面元素的比例一致，避免因不同元素EM值不...
font-size: (@px / @base-font-size) * 1rem; } .some-element { .px-to-rem(24); /* 实际上设置font-size为0.75rem */ } ``` 以上两种方案都有其优缺点。媒体查询方案简单易懂，但可能需要更多断点来覆盖各种...
这意味着无论父元素的`font-size`如何，使用rem的元素将始终根据`<html>`元素的`font-size`进行调整。例如，如果`html`的`font-size`设置为10px，那么`div{font-size:2rem;}`将使`div`的字体大小为20px。 接下来，...
<!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
注意：这个仓库已被转移到萨斯集体monorepo，用这个包，这个完全弃用之前。 介绍 Sass函数和mixin生成rem值。 安装 npm install @sass-collective/sass-rem --save ... font-size : sass-rem . rem ( 16 );
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,...
**语法**: `font-size: <绝对大小>|<相对大小>|<长度>|<百分比>` **允许值**: - `<绝对大小>`: xx-small | x-small | small | medium | large | x-large | xx-large - `<相对大小>`: larger | smaller - `<长度>`: ...
代码片段： section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center;... font-size: 2rem; min-height: 100%; height: 100vh; }