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. iOS pickerView（所有类型一网打尽）

    概述 关于PickView的所有类型都在这里 详细 代码下载:http://www.demodashi.com/demo/11017.html 首先看下项目的整体结构: 一.准备工作 UIPicker ...

  2. 【转帖】云平台发现服务构建：为什么不使用ZooKeeper

    http://www.chinacloud.cn/show.aspx?id=19979&cid=16 [日期:2015-04-29] 来源:dockerone   作者: [字体:大 中 小] ...

  3. 【转载】IIS6、IIS7、IIS7.5设置拒绝一组计算机(IP段)访问网站的方法

    IIS6设置方法: 1.打开IIS管理器,右键点击网站,选择“属性” 2.把标签切换到“目录安全性”,点击“IP地址和域名限制”的编辑按钮,如下图: IP地址和域名限制 3.选择“授权访问”,然后点击 ...

  4. 缺省模板参数（借助标准模板容器实现Stack模板）、成员模板、关键字typename

    一.缺省模板参数 回顾前面的文章,都是自己管理stack的内存,无论是链栈还是数组栈,能否借助标准模板容器管理呢?答案是肯定的,只需要多传一个模板参数即可,而且模板参数还可以是缺省的,如下: temp ...

  5. 对C++对象内存模型造成的影响(类/对象的大小)

    首先重新回顾一下关于类/对象大小的计算原则: 类大小计算遵循结构体对齐原则 第一个数据成员放在offset为0的位置 其它成员对齐至min(sizeof(member),#pragma pack(n) ...

  6. 微服务Spring Cloud与Kubernetes比较

    转 http://www.tuicool.com/articles/VnMf2y3 Spring Cloud或Kubernetes都宣称它们是开发运行微服务的最好环境,哪个更好?答案是两个都是,但他们 ...

  7. Eclipse发布安卓APK包无图标的解决方法

    算是一个Bug,清空项目都不行. 解决方法是卸载掉项目,重新导入.

  8. C++14系列（2）:C/C++的时间函数

    C++笔记開始 为了好好研究下C++14.顺便复习下曾经的C++知识.搞了个git(不断完好中): https://github.com/rododo/cpp14examples.git 里面会慢慢封 ...

  9. libxml2实例

    // libxmlTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <stdio.h> #includ ...

  10. Python内置函数property()使用实例

    class Shuxing(): def __init__(self, size = 10): self.size = size def getSize(self): print('getSize') ...