em与px换算

任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。
那么,
12px=0.75em,
10px=0.625em。
为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,
这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em单位有如下特点:

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

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

我们在写CSS的时候如果要用em为单位,需要注意两点:

  1. body选择器中声明Font-size=62.5%;

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

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

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

  但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

css em的更多相关文章

  1. css em单位

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器 ...

  2. jQuery mobile 前台设计中的css em的使用。

    先贴个网址:http://www.uml.org.cn/html/201207311.asp 大家可以参考一下面这张转换表(body字体为16px时的值) 总结 长篇介绍了一大堆,唯一想告诉大家的是以 ...

  3. CSS—— em的详解

    字体大小在浏览器的默认样式表中有规定.一般采用em为单位,也就是相对单位,1em=16像素. 同时,像P h1等等标签都采用浏览器默认的em单位,P为1em,h1为2em等等. 两条重要的规则: 1. ...

  4. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  5. 《深入理解bootstrap》读书笔记:第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  6. CSS中的视觉格式化模型

    视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树 ...

  7. css后代选择器

    后代选择器: <p><em>CSS</em>层叠样式</p> 使用后代选择器设置,之间用空格隔开: p em{font-size:40px;} 例子: ...

  8. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

  9. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

随机推荐

  1. BZOJ 1570: [JSOI2008]Blue Mary的旅行( 二分答案 + 最大流 )

    二分答案, 然后对于答案m, 把地点分成m层, 对于边(u, v), 第x层的u -> 第x+1层的v 连边. 然后第x层的u -> 第x+1层的u连边(+oo), S->第一层的1 ...

  2. MFC通过ODBC连接mysql(使用VS2012编写MFC)

    原创文章,转载请注明原文:MFC通过ODBC连接mysql(使用VS2012编写MFC) By Lucio.Yang 1.ODBC连接mysql 首先ODBC是什么呢? 开放数据库互连(Open Da ...

  3. xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  4. 如何彻底卸载sql server 2012

    好不容易装上了sql server 2012数据库,可是却不能连接本地的数据库,后来发现缺少一些服务,于是决定重新安装,但是卸载却很麻烦,如果卸载不干净的话,重新安装会出问题,所以下面就总结一些方法: ...

  5. PHP学习之数据库操作

    PHP数据库操作: 一.连接数据库 mysql_connect() 例:$link=mysql_connent("localhost","root"," ...

  6. Boost::Thread使用示例 - CG-Animation - 博客频道 - CSDN.NET

    Boost::Thread使用示例 - CG-Animation - 博客频道 - CSDN.NET Boost::Thread使用示例 分类: C/C++ 2011-07-06 14:48 5926 ...

  7. UberX及以上级别车奖励政策(优步北京第二、三组)

    优步北京第二.三组: 定义为2015年6月1日至7月19日激活的司机(以优步后台数据显示为准) 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版 ...

  8. NAND FLASH

    NAND Flash 以Micron公司的MT29F2G08为例介绍NAND Flash原理和使用. 1. 概述 MT29F2G08使用一个高度复用的8-bit总线(I/O[7:0])来数据传输.地址 ...

  9. Spring MVC 完整示例

    在本例中,我们将使用Spring MVC框架构建一个入门级web应用程序.Spring MVC 是Spring框架最重要的的模块之一.它以强大的Spring IoC容器为基础,并充分利用容器的特性来简 ...

  10. Spark源码学习3

    转自:http://www.cnblogs.com/hseagle/p/3673132.html 一.概要 本篇主要阐述在TaskRunner中执行的task其业务逻辑是如何被调用到的,另外试图讲清楚 ...