这里向大家描述一下CSS中px和em的特点和区别,px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的,而em是相对长度单位,相对于当前对象内文本的字体尺寸,相信本文介绍一定会让你有所收获。

详解px和em的特点和区别

象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?

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

◆em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

因此用px来定义字体,就无法用浏览器字体放大的功能。

任意浏览器的默认字体高都是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作为单位就行了。

◆CSS中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处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

转自:http://developer.51cto.com/art/201009/225166.htm

CSS中em,px区别(转)的更多相关文章

  1. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  2. css中em小于1时chrome字体大小和firefox字体大小不一致的问题

    css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...

  3. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  4. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  5. 彻底弄懂css中单位px和em,rem的区别

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

  6. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. 彻底弄懂css中单位px和em,rem的区别 转的自己看

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

  8. 彻底弄懂css中单位px和em的区别(转)

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...

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

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

随机推荐

  1. Delphi里可将纯虚类实例化,还可调用非虚函数

    这是与Java/C++的巨大不同.目前还没仔细想这个特征与TClass之间的联系,先记住结论再说.以后再回来修改这个帖子. unit Unit1; interface uses Windows, Me ...

  2. VCL里的构造函数

    好奇,为什么Create函数明明是个构造函数,还要带上override;这是C++里没有的事情.我虽然也明白其大致的作用和目的,但还是没有见到官方和权威的说法.如果哪位大大见到此文,还望给一个详细一点 ...

  3. Interpreter Pattern

    1.Interpreter模式的目的就是提供一个一门定义语言的语法表示的解释器,然后通过这个解释器来解释语言中的句子. 2.Interpreter模式结构图 3.实现 #ifndef _CONTEXT ...

  4. Vue中的methods、watch、computed

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...

  5. HDU5171 GTY's birthday gift —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/HDU-5171 GTY's birthday gift Time Limit: 2000/1000 MS (Java/Others)  ...

  6. HDU4045 Machine scheduling —— 隔板法 + 第二类斯特林数

    题目链接:https://vjudge.net/problem/HDU-4045 Machine scheduling Time Limit: 5000/2000 MS (Java/Others)   ...

  7. VS2010关于调用ffmpeg借口出错

    win7 下开发视频服务器,用到ffmpeg,debug版本运行正常,切换到release时,出现"0x00905a4d 处未处理的异常: 0xC0000005: 读取位置 0x00905a ...

  8. ibatis 优点,未完版

    iBatis是Apache的一个开源项目,一个O/R Mapping(???)解决方案,iBatis最大的特点就是小巧,上手很快,如果不需要太多复杂的功能,ibatis是能满足你得要求又足够灵活的最简 ...

  9. 脚踏实地学C#3-装箱和拆箱

    装箱:一种接受值类型的值,根据这个值在堆中创建一个完整的引用类型对象并返回对象的引用(堆地址)的隐式转换 int i_number = 2; //在栈中声明int类型i_Number变量并初始化 ob ...

  10. bootstrap 学习笔记(5)---- 图片和响应式工具

    (一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...