em与px的区别以及em特点和应用
发布时间:2008-11-11 12:03:00
一直也搞不清楚px与em之间的关系和特点,看过95%的中国网站需要重写CSS以后后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 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的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。
猜你喜欢
- 昨天晚上在家里把WM设计好的好台界面做成Html,在家里只用IE8和FF做了测试,感觉还行,除了感觉IE8还不成熟,渲染比较慢且不稳定外,标
- 1、使用函数shutil.make_archive()创建归档文件,并返回归档后的名称。import shutilpath_1 = r
- 这个程序将记数器的数字放在ACCESS数据库中,当然你也能用你希望其它的ODBC数据源.这个程序从URL中读取记数信息.如下:< IM
- 最近做的都是前端的项目,很多项目都有回到顶部的需求,下面把我写js代码做个笔录,方便以后查找。发现还可以添加从快到慢的动画效果和随时下拉滚动
- 将表数据生成SQL脚本的存储过程示例:CREATE PROCEDURE dbo.UspOutputData @tablename sysna
- 图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项
- 前言在了解了REST farmwork封装的视图类之后,我对python的面向对象有了更深刻的理解。Django RESR framewor
- 本文为大家分享了Python3实现发送QQ邮件功能:html,供大家参考,具体内容如下之前已经成功发送了qq邮件。下面贴出html格式的qq
- 这篇文章主要介绍了python实现括号匹配方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- CSV means Comma Separated Values. It is plain text (ansi).The CSV (&qu
- 1.背景 sysbench是一款压力测试工具,可以测试系统的硬件性能,也可以用来对数据库进行基准测试。sysbench 支持的测试
- 在原txt文件中,我们需要匹配出的字符串为:休闲服务(中间参杂着换行)直接复制到notebook里进行处理①发现需要拿出的字符串都在证卷研究
- pyfinance简介在查找如何使用Python实现滚动回归时,发现一个很有用的量化金融包——pyfinance。顾名思义,pyfinanc
- 先来看一道题目:>>> def func(numbers=[], num=1):... numbers.append(nu
- 最近学了一点点python爬虫的知识,面向百度编程爬了一本小说之后感觉有点不满足,于是突发奇想尝试爬一本漫画下来看看。一、效果展示首先是我们
- 上一次写的《Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面》(点击打开链接)部分老一辈的需求可能对这种后现代的风格并不满意,没
- mysql 8.0.20 winx64.zip压缩版安装教程记录如下,分享给大家1.下载MySQL官网:链接直接点击链接也可以下载:mysq
- 拆包是指将一个结构中的数据拆分为多个单独变量中。以元组为例:>>> a = ('windows', 10,
- Django项目配置修改我们需要把原先的Django项目进行修改才能更好地进行项目迁移工作,首先需要修改的是settings.py文件。由于
- 今天遇到一个需要用javascript将url中的某些参数替换的需求,想起了不久前从网上淘到了一个parseUrl函数,正好可以借此实现,代