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. Linux 网桥配置命令：brctl

    Linux网关模式下将有线LAN和无线LAN共享网段实现局域网内互联: 思路其实很简单:就是将虚拟出一个bridge口,将对应的有线LAN和无线LAN都绑定在这个虚拟bridge口上,并给这个brid ...

  2. oracle导出数据库dmp文件

    导出数据库为dmp文件,按照当前导出时间设置文件名称 @ECHO OFF ECHO 备份 SCOTT 用户的数据…… SET DBUserName=scott SET DBPassword= SET ...

  3. HTML5学习笔记 Web存储

    HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储 使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...

  4. android 实现代码混淆

    对于使用签名的apk,经常使用的反编译之后还是能查看class文件的代码实现.对于反编译可查看个人的博客点击打开链接 使用代码混淆就能是这样的常规反编译失效.很多其它混淆机制见官网http://dev ...

  5. 【服务器防护】centos iptables 防火墙设置 mac过滤

    1.阻止MAC地址为XX:XX:XX:XX:XX:XX主机的所有通信: iptables -A INPUT -s 192.168.1.21 -m mac --mac-source XX:XX:XX:X ...

  6. sql server服务看不到，显示为远程过程调用在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误10061

    需要启动sql server服务 启动就可以完成登录了

  7. Sql 常用的语句实例与代码

    在学习SQL的时候,本来预计花三天的时候掌握MS SQL这些基础,现在争取提前一天看完.总结沉底下来,其实也没有多少东西: 1.程序初始化前,先连接数据库 MFC程序中添加记录的代码: [cpp] v ...

  8. linux Find命令教程

    find的语法: find [起始目录] 寻找条件 操作 还有种表述方式:find PATH OPTION [-exec COMMAND { } \;] 因为find命令会根据我们给的option,也 ...

  9. python 使用urllib.urlopen超时问题的解决方法

    准备写一个python脚本抓取网页数据,前面抓了几个都没有什么问题,但总会抓取不完整,在中间过程中没有反应,发现执行urlopen的地方总是提示超时,百度了一下,因为我使用的是urllib不是urll ...

  10. socket发送http请求