rem是一个非常酷的CSS3属性，它相对于根元素<html>的字体大小适配。举一个非常简单的场景，要根据3种屏幕大小适配字体：
通常这么实现：
/* Document level adjustments */
html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; }
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
/* Type will scale with document */
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}
这样做很简单，但是有点儿想当然。最主要的问题是：你不能指望一个页面上设置的类型，能够满足所有模块的比例要求：大屏幕可能界面元素会显示的非常大，小的又太小。或者甚至相反，大屏幕可能无法显示足够小。遇到这种情况，可以继续用@media query调整大小，但是这样做效率不高，而且会非常混乱。
因此，我的想法是：
1、文档级别依然使用px像素，能够直接有效地检测出分辨率的变化。
2、页面每个模块用rem设置字体大小。因为rem是相对于根元素<html>的字体大小适配。
3、文本元素（H1、H2、p、li等等），如果你调整他们的大小，并用em作为单位，就能和模块大小形成相对比例。“em”作单位时，是一个相对于父元素的值。
下面是一个示例图：
实现如下
/* Document level adjustments */
html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; {
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
/* Modules will scale with document */
.header {
font-size: 1.5rem;
}
.footer {
font-size: 0.75rem;
}
.sidebar {
font-size: 0.85rem;
}
/* Type will scale with modules */
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
这样你可以设置一个模块级别的字体大小，这是非常容易的。
当然IE6-8是不支持CSS3的rem属性的。移动端的话也不需要考虑这个问题。
相关推荐
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...
假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如 html{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem; } rem来做适配 以前我们往往这样做页面：viewport width 设置为 ...
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，... rootValue: 32,//结果为：设计稿元素尺寸/32(一般750px的设计稿的根元素大小设置32)，比如
先安装postcss-pxtorem： npm install postcss-pxtorem –save-dev 进行安装 通过屏幕的变化，设置动态根元素 font-size ： 我写在vue的html中 function setRem () { let htmlWidth = document....
第二步：使用px2rem插件，来捕捉当前项目的所有px，直接计算相对应数值。 这样，以后写界面，就可以直接用px来构建界面，不用自己去计算啦！ 1、安装插件(我是安装了淘宝镜像，所以是cnpm,若是没装淘宝镜像，就npm)...
px2rem 插件方便的将px单位转为了rem。 px2rem 地址：https://www.npmjs.com/package/px2rem 这应该是vue项目在适配移动端时候，最简单的方法之一 下面是基本步骤（使用cnpm） 1.下载并引入lib-flexible cnpm ...
今天，我们使用Vue CLI3 做一个移动端适配 。 前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from 'vue' ...
刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。稍微坐下总结： 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而...
即如果根元素的 font-size 大小为 14px，则 1rem = 14px rem 适配移动 web 端 适配效果 在不同尺寸的屏幕下，同一个元素的大小看起来不是一样大的，但是它们所占屏幕宽度的比例是一样的。 代码 // 在 html 文件的 ...
前言 移动端 rem 适配方案回顾总结 如何使用 rem rem 单位的计算参考 html 的根节点 font-size进行计算，根节点的...假定设计稿宽度 为 750px，我们定义了自己使用 1rem = 16px 的单位去布局，如何适配呢？ 在 chrome
css3语法: （750px设计图的1rem = 100px） @media only screen and (min-width: 320px) and (max-width: 479px){ html { font-size: 42.67px !important; } } @media only screen and (min-width: 480px) and ...
主要介绍了css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况的相关资料,需要的朋友可以参考下
使用rem和em代替px单位，更适合做响应式布局，控制组件大小。如果要支持IE8，只能继续用Bootstrap 3。 重写所有JavaScript插件：为了利用JavaScript的新特性，Bootstrap 4用ES6重写了所有插件。现在提供UMD支持、...
em，相对于父元素字体大小，元素的非font-size属性用em的话，相对于自身font-size vw，相对于视口的宽度，视口被均分为100单位的vw 像webpack里的postcss有postcss-px-to-viewport，可以将px转换为vw。 绝对定位 相...
1、为什么要用rem 博客很久没写了，原因很简单。 最近接手了一个项目，要同时做PC和移动端的页面，之前没接触过，但毕竟给钱的是大爷，所以还是硬着头皮上了。 移动端最麻烦的是什么？ 不同分辨率适配！ 具体来说，...
在做移动端web app的时候，众所周知，移动设备分辨率五花八门，虽然我们可以通过CSS3的media query来实现适配，例如下面这样： html { font-size : 20px; } @media only screen and (min-width: 401px){ html { ...
前言 最近在负责有赞的某个业务的微信小程序开发，这是我第一次着手微信小程序的开发，这个过程中发现微信小程序所定义的一套 WXSS (WeiXin ...平时我们一般会用 em 或者 rem 来做屏幕适配，而在微信小程序中，
执行上下文栈、变量对象、作用域链、this执行上下文闭包变量提升v8垃圾回收call、apply、bind原理及实现创建对象和继承oop编程思想ES6let、...CMD区别（比较旧的可以忽略）选择器及优先度rem、em、vh、vw和px的关系...