简谈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
- 应该注意的是浏览器的默认字体高度都是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，%的更多相关文章
- css长度单位学习(em,rem,px,vw,vh)
绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...
- css中单位em和rem
一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...
- css中的em 简单教程 -- 转
先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...
- CSS中的EM属性之弹性布局
这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...
- CSS系列：长度单位&字体大小的关系em rem px
em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- em,rem,px的实际应用
看了好多的文章,就只是在看他们的换算,没有实际做出例子所以一直很疑惑,不知道到底是怎么写的.今天写了一个demo.务必彻底弄清楚. 先说三者的区别: 首先是我们常见的px. px: em:相对长度单位 ...
- （转）CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...
- 学习CSS了解单位em和px的区别
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
随机推荐
- brush
简介 Brushing是一个通过点击或触摸来选择一个一维或二维区域的交互操作,比如可以通过点击鼠标并移动. brush经常被用来选择离散的元素比如散点图中的点或桌面上的文件等.它也可以被用来放大选中的 ...
- js & array to string
js & array to string https://stackoverflow.com/questions/13272406/convert-string-with-commas-to- ...
- Vue2.0 render:h => h(App)
new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...
- 【.Net+数据库】Unable to convert MySQL date/time value to System.DateTime
C#读取MySql时,如果存在字段类型为date/datetime时的可能会出现以下问题“Unable to convert MySQL date/time value to System.DateT ...
- Spring Boot 初步小结
Spring Boot 是一种开发模式,不涉及任何新的技术 1.了解自动配置的原理 2.常用application.yml文件的配置项 3.Spring Boot 及 第三方提供的各种 starter ...
- 【loj2325】「清华集训 2017」小Y和恐怖的奴隶主 概率dp+倍增+矩阵乘法
题目描述 你有一个m点生命值的奴隶主,奴隶主受伤未死且当前随从数目不超过k则再召唤一个m点生命值的奴隶主. T次询问,每次询问如果如果对面下出一个n点攻击力的克苏恩,你的英雄期望会受到到多少伤害. 输 ...
- 谷哥的小弟学前端(01)——HTML常用标签（1）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
- java规范(三)-----判空----方法内的为空判断
一般我们判空或者有判断条件时 都是使用 if(条件成立){ 执行代码 } 这样的逻辑. 但是如果对象的字段很深层次时或者条件很多时就容易形成很多个{}的情况,这样就容易分不出哪个花括号属于哪部分.如下 ...
- bzoj4753: [Jsoi2016]最佳团体（分数规划+树形依赖背包）
菜菜推荐的“水题”虐了我一天T T...(菜菜好强强qwq~ 显然是个分数规划题,二分答案算出p[i]-mid*s[i]之后在树上跑依赖背包,选k个最大值如果>0说明还有更优解. 第一次接触树形 ...
- bzoj3143: [Hnoi2013]游走（贪心+高斯消元）
考虑让总期望最小,那么就是期望经过次数越多的边贪心地给它越小的编号. 怎么求每条边的期望经过次数呢?边不大好算,我们考虑计算每个点的期望经过次数f[x],那么一条边的期望经过次数就是f[x]/d[x] ...