浅谈rem、em、px

1、px：像素(Pixel)

px是相对长度单位，他是相对于显示器屏幕分辨率而言的

优点：比较稳定、精确

缺点：在浏览器 中放大或者缩小浏览页面，会出现页面混乱的情况。

如下例子：

.buttonPX{    width:100px;    height:60px;    line-height:60px;    display: inline-block;    font-weight:bold;">#00a0b6;    -webkit-border-radius:90px;    -moz-border-radius:60px;    border-radius:15px;    font-size:24px;    color:#fff;    text-decoration: none;    text-align: center;    border:none}

<button type="button" class="buttonPX">确定</button>效果：

2、em：是相对长度单位

em是相对于父元素来设计字体大小的，如果当前对行内文本的字体尺寸为被人为设置，则em是相对于浏览器的默认字体尺寸。浏览器默认的字体是16px，所以未经调整的浏览器都符合 1em = 16px，为了方便使用em时，通常在css的body中声明font-size=62.5%（16*62.5%=10px）

缺点：em的值并不是固定的，他会继承父元素的字体大小

如同样设置48px的字体，设置父元素的大小和不设置父元素的大小的区别

.box1{    font-size:12px;}.buttonEm{    width:200px;    height:60px;    line-height:60px;    display: inline-block;    font-weight:bold;">#00a0b6;    -webkit-border-radius:90px;    -moz-border-radius:60px;    border-radius:15px;    font-size:4em;//注意此处    color:#fff;    text-decoration: none;    text-align: center;    border:none}.buttonEm2{    width:200px;    height:60px;    line-height:60px;    display: inline-block;    font-weight:bold;">#00a0b6;    -webkit-border-radius:90px;    -moz-border-radius:60px;    border-radius:15px;    font-size:3em; //注意此处    color:#fff;    text-decoration: none;    text-align: center;    border:none}

<div class="box1">    <button type="button" class="buttonEm">确定</button>  //设置了父元素的字体大小</div><br><div class="box2">    <button type="button" class="buttonEm2">确定</button>  //未设置父元素的字体大小</div>如果将其中的宽度等其他元素也改为em单位，则width=10em的实际宽度为width=48(行内文本字体的尺寸)*10 = 480px,也就是width的基本单位1em=fontsize的大小

3、rem (root em,根 em)

rem是相对单位，是相对与html根节点的单位

rem 主要是通过html 节点的fontsize确定的，所以不存在逐层复合的连锁反应

在JS的window.resize 事件中，动态的控制html节点的fontsize的大小，来动态控制rem的比例

设置rem单位的方法

方法一：直接在css样式中写一下代码即可：

html{

font-size:20px; //表示1rem相当于常用的20px，1rem = 20px

}

为了兼容适配不同的屏幕，也可斜成下面这样

html{font-size : 20px;}@media only screen and (min-width: 401px){    html {        font-size: 25px !important;    }}@media only screen and (min-width: 428px){    html {        font-size: 26.75px !important;    }}@media only screen and (min-width: 481px){    html {        font-size: 30px !important;    }}@media only screen and (min-width: 569px){    html {        font-size: 35px !important;    }}@media only screen and (min-width: 641px){    html {        font-size: 40px !important;    }}

方法二：使用js动态的实现此效果

(function(doc, win) {    var docEl = doc.documentElement,        resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘: ‘resize‘,        recalc = function() {            var clientWidth = docEl.clientWidth;            if (!clientWidth) return;

            if (clientWidth > 1920) {                clientWidth = 1920;                docEl.style.fontSize = 25 * (clientWidth / 1200) + ‘px‘; //font-size=25            }            else if (clientWidth > 900) {                docEl.style.fontSize = 25 * (clientWidth / 1200) + ‘px‘;//font-size = 25            }            else if (clientWidth >= 320) {                docEl.style.fontSize = 100 * (clientWidth / 500) + ‘px‘;//font-size = 100            }            else if (clientWidth >= 320) {                clientWidth = 320;                docEl.style.fontSize = 100 * (clientWidth / 500) + ‘px‘;//font-size = 100            }        };

    if (!doc.addEventListener) return;    win.addEventListener(resizeEvt, recalc, false);    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);})(document, window);

除了ie8以外，其他的都兼容rem