px像素（Pixel）。相对长度单位。像素px是相对于不同设备显示器屏幕分辨率（pad/phone/pc）而言的。(引自CSS2.0手册)

1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。

px相对的屏幕分辨率，而em相对于父级div，所以在响应式布局中使用em更合适，因为任何浏览器默认字体大小是固定的，而不同设备屏幕分辨率却各不相同。

em有如下特点：

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

<body style="font-size:62.5%"> 1em默认是16px,这里1em变为10px

<aside style="font-size:1.2em;"> 继承body这里的1.2em是12px

<p style="font-size:1em;"></p>继承自aside,所以这里的1em也是12px

</aside>

</body>

也就是避免1.2 * 1.2= 1.44的现象。比如说你在aside中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承aside的字体高而变为了1em=12px。

响应式布局中为什么要使用em设置字体大小而不用px的更多相关文章

  1. 响应式布局中重要的meta标签设置.适用于手机浏览器兼容性设置

    <!-- #手机浏览器兼容性设置 -->    <meta content="application/xhtml+xml;charset=UTF-8" http- ...

  2. 响应式布局中的CSS相对量

    一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...

  3. rem在响应式布局中的应用

    rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...

  4. css中响应式布局中样式的代码书写方法

    代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...

  5. 在响应式布局中，碰到图片不会自动缩放，因此需要一段js脚本

    <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...

  6. 自适应和响应式布局的区别，em与rem

    自适应布局:不同终端上显示的文字,图片,等位置排版都是一样的,只是大小不同. 响应式布局:通过媒体查询监听屏幕大小的变化,做出响应式的改变,在不同设备可能展现不同的样式效果. em:是相对其父元素的. ...

  7. 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  8. css3响应式布局

    响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...

  9. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

随机推荐

  1. Android中 单位 介绍

    看到有很多网友不太理解dp.sp和px的区别:现在这里介绍一下dp和sp.dp也就是dip.这个和sp基本类似.如果设置表示长度.高度等属性时可以使用dp 或sp.但如果设置字体,需要使用sp.dp是 ...

  2. EMQ学习---客户链接资源消耗

    Erlang进程消耗EMQ对客户端链接使用链接进程(emqtt_client)和session进程(emqtt_session)分开的策略. 当一个mqtt的客户端连接到EMQ的服务器上的时候,首先会 ...

  3. POJ 3279 Fliptile （二进制+搜索）

    [题目链接]click here~~ [题目大意]: 农夫约翰知道聪明的牛产奶多. 于是为了提高牛的智商他准备了例如以下游戏. 有一个M×N 的格子,每一个格子能够翻转正反面,它们一面是黑色,还有一面 ...

  4. NHibernate中ISession的Flush

    不知道在执行Insert或者Delete,update之后为什么要调用Flush(),后来看了http://www.cnblogs.com/lyj/archive/2008/10/17/1313612 ...

  5. Oracle 10g 数据库的备份和还原

    一.备份数据库 1.在图形工具中,如sqldeveloper,pl/sqldeveloper用以下这句查找空表 select 'alter table '||table_name||' allocat ...

  6. 用注册表更改DNS的代码分享

    用注册表更改DNS,1秒切换完毕,快速又方便,不用麻烦的去等待了,支持远程路劲运行 最进我这里DNS老是间歇性掉,很不稳定,广州地区,如果你的DNS经常需要更换,试试这个批处理, 论坛很多人发过了更改 ...

  7. Atitit.软件仪表盘(4)--db数据库子系统-监测

    Atitit.软件仪表盘(4)--db数据库子系统-监测 连接数::: 死锁表列表:死锁基础列表(最近几条记录,时间,sql等) 3.对服务器进行监控,获取CUP,I/O使用情况   4.对数据库进行 ...

  8. atitit.MyEclipse10 中增加svn插件故障排除

    atitit.MyEclipse10 中增加svn插件故障排除 删除\configuration \org.eclipse.update 不行... 二. 在configuration下的config ...

  9. Android Bitmap和Canvas学习笔记

    位图是我们开发中最常用的资源,毕竟一个漂亮的界面对用户是最有吸引力的. 1. 从资源中获取位图 可以使用BitmapDrawable或者BitmapFactory来获取资源中的位图. 当然,首先需要获 ...

  10. 客户端在向服务器的动态页发出请求的时候，服务器才会创建session

    注意,纯的HTML页面很有可能导致服务器不会为用户创建session,即便是新到的用户也是如此. 在某些情况下也可能与服务器的具体配置有关系. 尤其是在对session进行监听的时候要注意这一点.