很多网页设计者在写css时都是在通用选择器中就设置了字体的大小,中文情况下一般为12px。然而IE浏览器却无法调整那些使用px作为单位的字体大小。其实使用em作为单位是可以避免这一情况的。

一、em和px的区别:
1. IE无法调整那些使用px作为单位的字体大小;

2. Firefox能够调整px和em。

3.px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

4.em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则是相对于浏览器的默认字体尺寸。浏览器的默认字体尺寸没有被修改的话,默认是16px。

二、em的特点:
1. em的值并不是固定的。

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

三、em和px如何进行换算
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算,需要在css中的body选择器或者通用选择器中先全局声明 Font-size=62.5%,很多初学者可能会在此定义0.625em或者直接定义12px,这是没有效果的,一定要定义font-size=62.5%!

这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

四、CSS中应用em需要注意两点:
1. body选择器中声明Font-size=62.5%。

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

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

4.由于em能继承父元素的特点,也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content(父元素)中声明了字体大小为1.2em,那么在声明 p(子元素) 的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

此外有一点必须要注意,在IE处理汉字时,对于浮点的取值精确度有限,在body下62.5%出来的12px字体比直接定义的要大一些,需要将 62.5%换成63%。通过以上对CSS代码的调整,你会发现自己的网站又向用户体验设计更靠近了一步。

px和em之间的转换的更多相关文章

  1. HTML中字体单位px pt em之间的转换

    在实现打印功能时,遇到一个问题,使用px作为单位在不同的机器或者打印机上打印出的字体大小不一样,所以经过查询,发现使用pt为单位能够进行物流适配,下面是各单位之间的转换: 定义字体大小有常见三种单位, ...

  2. 微信小程序 尺寸单位px与rpx之间的转换(入门篇)

    1.rpx:微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应.规定屏幕宽度为750rpx. 微信官方建议视觉稿以iphone6为标准. 2.个人示例测试: ...

  3. rem、px、em之间的区别以及网页响应式设计写法

    个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...

  4. px、em、pt之间的区别与互相转换

    关于px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文(原网址已失效,这是其他站点) 这里引用的是Jor ...

  5. Android中dp和px之间进行转换

    在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情况下,我们都会选择使用dp,这样可以保证不同屏幕分辨率的机器上布局一致.但是在代码中,如何处理呢?很多控件的方法中都只提供了 ...

  6. Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换)

    Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换) Android中dp和px之间进行转换 在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情 ...

  7. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  8. CSS文字大小单位px、em、pt(转)

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  9. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

随机推荐

  1. Linux下c/c++项目代码覆盖率的产生方法

    最近做了一系列的单元测试相关的工作,除了各种规范及测试框架以外,讨论比较多的就是关于代码覆盖率的产生,c/c++与其他的一些高级语言或者脚本语言相比较而言,例如 Java..Net和php/pytho ...

  2. js面形对象(2)

    1.​原型与in操作符     有两种方式使用in操作符:单独使用和在for-in循环中使用.在单独使用时,in操作符会在通过对象能够访问给定属性时,返回true,无论该属性是存在实例或者是存在于原型 ...

  3. ModelMap和ModelAndView

    一.ModelMap和ModelAndView 1.1.ModelMap ModelMap对象主要用于传递控制方法处理数据到结果页面,也就是说我们把结果页面上需要的数据放到ModelMap对象中即可, ...

  4. 教你50招提升ASP.NET性能(十七):不要认为问题只会从业务层产生

    (28)Don’t assume that problems can only arise from business logic 招数28: 不要认为问题只会从业务层产生 When beginnin ...

  5. PowerShell管理IIS(新建站点、应用程序池、应用程序、虚拟目录等)

    #导入IIS管理模块 Import-Module WebAdministration #新建应用程序池 api.dd.com New-Item iis:\AppPools\api.dd.com Set ...

  6. Sysprep命令详解

    本主题描述了 Windows(R) 8 版本的系统准备 (Sysprep) 工具的命令行语法. 如果你打算创建安装映像以部署到不同的计算机上,则必须运行带有 /generalize 选项的 Syspr ...

  7. 节点文件将两个不同格式的XML文件,进行节点对照,并生成一个用于对照功能的XML

    本文纯属个人见解,是对前面学习的总结,如有描述不正确的地方还请高手指正~ 经常有的需求是,需要将一种格式的XML转换成另一种XML.如果要实现这个功能首先需要将两个不同XML手动建立节点对比关系.然后 ...

  8. C# 添加类库依赖

  9. Codeforces Gym 100002 C "Cricket Field" 暴力

    "Cricket Field" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1000 ...

  10. delphi 插入 HTML代码 播放器

    Delphi在Webbrowser中插入 HTML/java script代码 使用方法将下面的代码赋值到1个记事本里保存,然后保存为xxx.htm就可以看到效果使用PasteHtml实现功能 的事件 ...