简谈CSS 中的 em，rem，px，%

简谈CSS 中的 em，rem，px，%
　　在实际工作中，可能我们用的比较多的是‘%’ 和 px，但是我们也经常看到很多网站和css框架里用的是em 或rem。而‘%’ 和px已经都是比较常见或者说是常用。但是em 和rem 却鲜有使用，一直以来也没有过多的去关注他们之间的区别。

基本定义

　　%　是定义基于包含块（父元素）宽度的百分比。（w3c上是这么定义的）。就是说其是一个相对于父元素大小来决定的　　

　　px 是像素Pixel。是一个相当长度单位。其相对于显示器分辨率而言的。而且IE无法调整那些使用px作为单位的字体大小

　　em 是相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸。

即：em的值并不是固定的；em会继承父级元素的大小。

　　rem 是css3 新增加的一个相对单位（root em 。 rem是相对于html 跟元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

区别
- px 和em
1. 1. 应该注意的是浏览器的默认字体高度都是16px，所以未经调整的浏览器都符合1em=16px。如下
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            display: flex;  /*flex or inline-flex*/
            display: -webkit-flex;*/
            width: 100%;
            height: 100%;
            background-color: lightgrey;
        
        }
        .box-item{
            border: 1px solid black;
            margin: 5px;                
            font-size: 1em;
            
        }
        .three{
            font-size: 16px;
            border: 1px solid black;
            margin: 5px;    
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="box-item">item1</div>
        <div class="box-item">item2</div>
        <div class="three">item3</div>
    </div>
</body>
</html>
```
如图：item3 和 item1，item2的大小是一样的

　　2. em相对于父级元素计算。如下我们修改一下css
```
<style>
        .box{
            display: flex;  /*flex or inline-flex*/
            display: -webkit-flex;*/
            width: 100%;
            height: 100%;
            background-color: lightgrey;
            font-size: 1.2em;
            /* 50*/
        }
        .box-item{
            margin: 5px;                
            font-size: 1.2em; /**/
        }
        .three{
            /*12em;*/
            font-size: 19.2px;/* 1.2*16 */
            /*border: 1px solid black;*/
            margin: 5px;    
        }
        
    </style>
```
如下图：当我们在item类的父级元素中设置了font-size为1.2em 然后再在item 中也设置font-size 为1.2em 然后我们设置item3 的字体大小为1.2*16 =19.2px

但是我们发现其字体大小明显不相同。

我们根据其是相对于父级元素来计算的原因此时的item1和item2中的em 已经不是相对与浏览器的了，其父系元素已经设置了大小1.2em。而其父级元素是相对于浏览器。所以我们再次修改为 1.2*16*1.2px
```
.three{
            /*12em;*/
            font-size: 23.04px;/* 1.2*16 *1.2*/
            /*border: 1px solid black;*/
            margin: 5px;    
        }
```
如下
- em 和rem
　　　　因为rem是相对于HTML跟元素所以如图当我们再次把.box-item的字体大小改为1.2rem时，发现其已经不是23.04px 了

　　　　
```
.box-item{
            margin: 5px;                
            font-size: 1.2rem;
            
        }
```
然后我们再将.three的字体大小改为1.2*16 发现如下图。
```
.box-item{
            margin: 5px;                
            font-size: 1.2rem;
        }
        .three{

            font-size: 19.2px;
            margin: 5px;    
        }
```
总结

　　整体来看似乎em要好于px 而rem又好于rem 。但至于具体选择用那种应该以项目而定吧。如果要考虑兼容问题的话，建议可以rem和px 混用。而如果你的项目要适配各种个移动设备的话建议使用rem。毕竟不同设备之间的分辨率相差还是很到的。

结语：如有不对的地方，请多多指教。
相关阅读:
回顾初心
 团队作业6（代码复审+事后诸葛亮）
Alpha阶段项目复审(鸽牌开发小分队)
事后诸葛亮（鸽牌开发小分队）
团队作业5
第七篇Scrum冲刺博客
 第六篇Scrum冲刺博客
 第五篇Scrum冲刺博客
 第四篇Scrum冲刺博客
 第三篇Scrum冲刺博客
原文地址：https://www.cnblogs.com/taoyoung/p/6533846.html

简谈CSS 中的 em，rem，px，%

基本定义

区别

总结