在实际工作中，可能我们用的比较多的是‘%’ 和 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. 应该注意的是浏览器的默认字体高度都是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;

            /*width: 50*/

        }

        .box-item{

            margin: 5px;

            font-size: 1.2em; /**/

        }

        .three{

            /*width: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{

            /*width: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。毕竟不同设备之间的分辨率相差还是很到的。

结语：如有不对的地方，请多多指教。

简谈CSS 中的 em，rem，px，%的更多相关文章

  1. css长度单位学习(em,rem,px,vw,vh)

    绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...

  2. css中单位em和rem

    一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...

  3. css中的em 简单教程 -- 转

    先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...

  4. CSS中的EM属性之弹性布局

    这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...

  5. CSS系列：长度单位&字体大小的关系em rem px

    em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...

  6. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  7. em,rem,px的实际应用

    看了好多的文章,就只是在看他们的换算,没有实际做出例子所以一直很疑惑,不知道到底是怎么写的.今天写了一个demo.务必彻底弄清楚. 先说三者的区别: 首先是我们常见的px. px: em:相对长度单位 ...

  8. （转）CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

  9. 学习CSS了解单位em和px的区别

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

随机推荐

  1. 第138天：Web前端面试题总结（编程）

    1.如何让一个盒子水平垂直居中 //已知宽高 <div class="div1"></div> <style> .div1{ width:400 ...

  2. 点击除指定元素以外的任意地方隐藏js

    $(document).click(function () { $(".search_box").hide(); }); $(".resultUl").on(& ...

  3. bzoj1061-[Noi2008]志愿者招募-单纯形 & 费用流

    有\(n\)天,\(m\)类志愿者,一个第\(i\)类志愿者可以从第\(s_i\)天工作到第\(t_i\)天,第\(i\)天工作的志愿者不少于\(b_i\)个.每一类志愿者都有单价\(c_i\),问满 ...

  4. BZOJ4999 This Problem Is Too Simple!（树上差分+dfs序+树状数组）

    对每个权值分别考虑.则只有单点加路径求和的操作.树上差分转化为求到根的路径和,子树加即可.再差分后bit即可.注意树上差分中根的父亲是0,已经忘了是第几次因为这个挂了. #include<ios ...

  5. 洛谷 P3177 树上染色

    题面 题目要求将k个点染成黑色,求黑点两两距离及白点两两距离,使他们之和最大. 我们可以将距离转化为路径,然后再将路径路径拆分成边,就可以记录每条边被经过的次数,直接计算即可. 很简单对吧?那么问题来 ...

  6. DNA Sequence POJ - 2778 （ac自动机 + 快速幂）

    题意: 给出患病的DNA序列,问序列长度为n的,且不包含患病的DNA序列有多少种 解析: 以给出的患病DNA序列建trie树  患病结点要用flag标记 对于长度为n的序列 位置i有四种 情况A  C ...

  7. 降雨量 HYSBZ - 1067（RMQ）

    F.A.Qs Home Discuss ProblemSet Status Ranklist Contest 入门OJ Login Register 捐赠本站 Notice:1:注册本OJ方式请见ht ...

  8. 【CF600E】Lomsat gelral（dsu on tree）

    [CF600E]Lomsat gelral(dsu on tree) 题面 洛谷 CF题面自己去找找吧. 题解 \(dsu\ on\ tree\)板子题 其实就是做子树询问的一个较快的方法. 对于子树 ...

  9. 【CF438E】The Child and Binary Tree（多项式运算，生成函数）

    [CF438E]The Child and Binary Tree(多项式运算,生成函数) 题面 有一个大小为\(n\)的集合\(S\) 问所有点权都在集合中,并且点权之和分别为\([0,m]\)的二 ...

  10. NOIP2017 考前汇总

    时隔一年,相比去年一无所知的自己,学到了不少东西,虽然还是很弱,但也颇有收获[学会了打板QAQ] 现在是2017.11.9   21:10,NOIP2017的前两天晚上,明天就要出发,做最后的总结 N ...