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. ie6/7 bug大全

     1. ie6/7下ul高度变高  li 加 vertical-align:bottom; 2.ie6不支持min-height a:height:auto !important; height:10 ...

  2. javax.naming.NoInitialContextException: Need to specify class name in environment or system property

    javax.naming.NoInitialContextException: Need to specify class name in environment or system property ...

  3. Android权限注解

    Android应用程序在使用很多功能的时候必须在Mainifest.xml中声明所需的权限,否则无法运行.下面是一个Mainifest.xml文件的例子: <?xml version=" ...

  4. Xcode常见问题

    今天真机测试的时候,突然出现了这个错误:  not have an architecture that “Administrator”的 iPhone (3) can execute. 原因是我刚刚修 ...

  5. codeblocks 配置OpenGL

    一.选择编译器环境 这里选择codeblocks,带MinGW的版本. 二.下载glut工具包 网址:http://pan.baidu.com/s/1eQriTQM 三.配置glut 解压缩下载的gl ...

  6. VS调试-添加命令行参数

    Project -> Properties -> Configuration Properties -> Debugging 在Command Arguments里填上即可

  7. [转]JavaScript放在<head>和<body>的区别

    原文:http://liminhappygirl.iteye.com/blog/1841360 javaScript放在<head>和<body>的区别: 在HTML body ...

  8. linphone 在am335x的编译过程

    环境变量: export PREFIX=/usr export HOSTTPL=arm-linux-gnueabihf export INSTALLDIR=/home/elinux/linphone/ ...

  9. 关于ubuntu系统boot分区空间不足而又无法卸载旧内核的解决方法

    2016年09月03日 14:16:45 萧氏一郎 阅读数:7802 标签: ubuntuboot分区清理更多 个人分类: linux   版权声明:本文为本猿原创文章,转载务必注明出处,多谢. ht ...

  10. 如何从CentOS官网下载我们想要的版本

    今天想从官网下载6.5版本的CentOS,结果找了好一会儿才找到,赶紧记录下来,以备以后查询. 第一步在百度搜索centos,点击"Download CentOS",如下图所示. ...