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. 在Form中调用请求并直接打印结果

    请求打印,一般都是需要提交请求,然后在请求界面查看输出,将打印内容显示在浏览器上 现可在通过调用请求后直接打印到浏览器上, 实现步骤如下:   ---设置请求打印模板      l_req_bool ...

  2. JS应用（资料很全）

    http://www.cnblogs.com/meil/archive/2007/02/06/642559.html 如果你找的javascript的东西的话,建议你 ctrl+F  直接在这个页上找 ...

  3. 摘：static,const,inline,define的意义

    static 1) 产生背景 引出原因:函数内部定义的变量,在程序执行到它的定义处时,编译器为它在栈上分配空间,大家知道,函数在栈上分配的空间在此函数执行结束时会释放掉,这样就产生了一个问题: 如果想 ...

  4. 不止是联网！教你玩转PC自带Wi-Fi网卡

    前言:Wi-Fi对于现在的智能手机来说已经是再熟悉不过的配置了,而主板自带Wi-Fi网卡的设计也越来越普及,但有些玩家可能思维还停留在“Wi-Fi网卡 = 连无线网络用的网卡,我用有线就不需要”的层次 ...

  5. unity, GUIStyle and Skin

    例1: using UnityEngine; using System.Collections; using UnityEditor; using System.Collections.Generic ...

  6. Bootloader和Root

    1. Unlock Bootloader是解除系统启动加载器(Bootloader)的原厂限制, 让用户可以使用到更多的功能(如刷新内核.刷ROM.修改超频....) Bootloader(系统启动加 ...

  7. 在linux平台下,设置core dump文件属性（位置,大小,文件名等）

    在linux平台下,设置core dump文件生成的方法: 1) 在终端中输入ulimit -c 如果结果为0,说明当程序崩溃时,系统并不能生成core dump. 2) 使用ulimit -c un ...

  8. sh 不显示当前的路径

    linux中sh是链接到bash上的,所以sh与bash在功能上是没有区别的 只是sh不显示路径!!! sh-4.1# cd /usr/local/src sh-4.1# pwd /usr/local ...

  9. iOS开发Swift篇—（七）函数

    iOS开发Swift篇—(七)函数 一.函数的定义 (1)函数的定义格式 1 func 函数名(形参列表) -> 返回值类型 { 2 // 函数体... 3 4 } (2)形参列表的格式 形参名 ...

  10. python中sorted方法和列表的sort方法使用详解

    一.基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不可修改的. 排序,数字.字符串按照ASCII,中文按照unicode从小到大排序 ...