rem
Posted 橙子的代码世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem相关的知识，希望对你有一定的参考价值。
rem单位
rem是一个相对的单位，他是相对于根元素html来说的，我们只需要在根元素确定一个参考值就可以，其它元素设置rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放，我们可以对html的根元素的字体进行设置，（如果没有进行设置，默认的html的根元素的大小是16px）；
我们来看一个简单的代码实例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} // 62.5% =10px;
body {font-size: 1.6rem;/*1.6 × 10px = 16px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算：1.2rem即 12px ，1.6rem即16px 。 如果没有设置，将是以浏览器默认的“16px”为基准 ）。
rem属性浏览器兼容性
rem是CSS3新引进来的一个度量单位，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。
【需要注意的问题：谷歌浏览器不支持10px及以小的字体，默认最小的字体为12px，所以如果用了 ”62.5%“，并且元素尺寸也用"rem"的话在谷歌浏览器显示，元素显示的尺寸比原来设计的要大很多，造成页面错位。解决的办法是将"font-size: 62.5%;"改为"font-size:20px;"即"1rem = 20px"】。
在页面遇到字体小于12px的情况是可以使用，谷歌低版本的浏览器可以设置 -webkit-text-size-adjust:none; 高版本的浏览器对此不适用；高版本浏览器的解决方法是： font-size: 12px;-webkit-transform-origin-x: 0; -webkit-transform: scale(0.90);
以上是关于rem的主要内容，如果未能解决你的问题，请参考以下文章