如何将px换成em,px与em区别是什么?

 字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。

  我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。

  怎么将px换成em呢?特地转jorux06年12月的一篇文章,因为中文站用px的太多了,如果你是对代码不敏感的纯设计师,可以向技术人员或者页面制作人员请教:

  em是何物?

  em指字体高,任意浏览器的默认字体高都是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会继承父级元素的字体大小。

  重写步骤:

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

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

  简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em,也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em=1.2*12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px*62.5%*1.2=12px,而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

  3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

  诡异的12px汉字(原因待查)

  本人在完成em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题我已经解决,你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗?

  本现象只发生在12px的汉字,英文不存在此现象。

  总结:

  本人认为em已经过时了,没必要用em,因为现在浏览器都升级到新版了。都支持px的放大了。

如何将px换成em,px与em区别是什么?

时间: 2024-10-05 12:19:25

如何将px换成em,px与em区别是什么?的相关文章

em px pt单位介绍及换算

PX\EM\PT单位介绍 px Pixel单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的字体尺寸,国外使用比较多,这里em与html <em>标签的"EM"拼写完全相同,而这里em作为单独文本单位.pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用. 1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持 在这里也推

CSS中关于字体大小的定义 em px rem pt %

关于em 所有浏览器的默认字体大小都是16px,所以未经调整的浏览器在显示1em=16px.换算过来的话也就是说1px=0.0625em,也就是12px=0.75em, 10px=0.625em,为了简化font-size的换算,大家可以在css中的body中先全局声明font-size=62.5% ,16px*62.5% =10px; 即把默认字体大小设置为10px;这样的话1em = 10px; 此外有一点必须要注意,可能是IE处理汉字时,对于浮点的取值精确度有限,在body下62.5%出来

rem em px 单位换算

1.px(像素) px(像素),为分辨率的基准单位,相对于显示器屏幕分辨率而言的. 特点: IE无法调整那些使用px作为单位的字体大小: 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). 2.em em是相对长度单位,相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合:

JS判断移动端还是PC、移动端px转换成rem、移动端圆角

判断PC还是移动if(/AppleWebKit.Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf(

CSS3用rem,em,px设置字体大小

PX为单位 相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使我们的Web页面布局被打破.这样对于那些关心自己网站可用性的用户来说,就是一个大问题了.因此,这时就提出了使用“em”来定义Web页面的字体. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在

delphi 怎么将一个文件流转换成字符串(String到流,String到文件,相互转化)

//from   http://kingron.myetang.com/zsfunc0d.htm (*//   标题:充分利用pascal字符串类型   说明:和PChar不同,string可以保存#0字符在其中;示例文件.内存流字符串之间转换   设计:Zswang   日期:2002-01-25   支持:[email protected]   //*) ///////Begin   Source   function   StringToFile(mString:   string;  

将 Photoshop CC 2015.5 英文界面换成中文, 英文与中文界面互换

注:转载或引用请注明出处 在英文的win server 2012 r2 上安装PS CC 2015.5 时,安装程序自动按成了英文版的PS,那么如何将英文换成中文呢? 网上大多将的是将中文换成英文,经过尝试后,发现了将英文换成中文的方法如下: 0. 先关闭PS 1. 下载zh_CN的语言包,我共享如下: http://pan.baidu.com/s/1pK9n4U3 注意,此处的语言包对应PS版本为: 2. 在将安装路径中:Adobe\Adobe Photoshop CC 2015.5\AMT\

php 把数字1-1亿换成汉字表述,例如 150 转成 一百五十

直接上实例 写到 千亿上了. /** * @author  ja颂  * 把数字1-1亿换成汉字表述,如:123->一百二十三 * @param [num] $num [数字] * @return [string] [string] */function numToWord($num){ $chiNum = array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九'); $chiUni = array('','十', '百', '千', '万',

终于忍不了xfce的界面,换成kde吧,超极酷!相信每个人都会爱上它的!

开始之前先BB一段无关紧要的缘由. 之前因为自己的笔记本和实验室的台式电脑配置都奇差,所以装的都是xfce,资源占用比较小嘛(就这样都经常卡)... 如今鸟枪换成机关枪,新电脑是G3258的CPU,低端之王吧,用来跑Linux和写程序,顺便日常上网看电影使用还是够的.主要看中了它功率低,还能超频,又是奔腾20周年纪念款,算是值得吧. 昨天给新电脑装完系统,还是用的xfce+lightdm的组合,本想奢侈一把,装个cairo-dock,比xfce自带的panel要好看那么一丢丢.结果发现cairo