PX\EM\PT单位介绍
px Pixel单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐;
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸,国外使用比较多,这里em与html <em>标签的"EM"拼写完全相同,而这里em作为单独文本单位。
pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。
1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持 在这里也推荐使用PX作为单位;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的,QQ截图也是使用PX作为长度宽度单位。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
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作为单位就行了。
12px相当于9pt长度;
12px相当于0.75em长度;
9pt相当于0.75em长度;
一般我们使用em换算px较多
高级em与px换算:
具体使用时候:
我们在对全体html标签声明初始一次font-size=62.5%
如:
*{font-size=62.5%}
即可此后面布局可依据以下技巧进行设置em单位
font-size:1.2em等于font-size:12px
font-size:1.4em等于font-size:14px
以此类推相当于初始font-size=62.5%后,em与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处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。
推荐网页单位
所以为了单位换算错误推荐使用PX(像素)作为网页制作单位。
以上为大家介绍了px em pt单位,及换算方式,一般现在我们使用长度单位都以px为长度单位。这里我们也推荐使用以px(像素)为网页的尺寸长度单位,符合浏览器的像素单位,同时也为了方便计算长度尺寸。
关于px pt em单位总结
1)、推荐px像素为单位:通常我们使用px(像素为单位)较多,其次是em单位,平时推荐大家以px为单位;
2)、我们的显示屏分辨率以px像素为单位;
3)、我们QQ截图时候也是以px像素单位。
- 浏览: 72629 次
- 性别:
文章分类
最新评论
发表评论
-
CSS滤镜让图片模糊(毛玻璃效果)
2015-02-03 08:51 954<img src="mm1.jpg" ... -
HTML head 头标签
2014-12-05 20:13 493HTML head 头部分的标签、元素有很多,涉及到浏览器对网 ... -
css元素隐藏原理及display:none和visibility:hidden
2014-10-23 17:13 720一、CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼 ... -
html中怎么去掉input获取焦点时候的边框
2014-10-20 17:01 1234css设置属性:outline:none; -
select控件option里加链接
2014-10-19 17:25 12401、select控件option里加链接 <se ... -
css之让文字排在图片的右边的中心位置
2014-10-13 10:54 927<dl> < ... -
JavaScript 下拉菜单实现代码
2014-10-12 13:57 463利用css+js实现的下拉菜单。通过getElementsB ... -
Css Sprite
2014-09-14 17:43 451Css Sprite也被为CSS精灵,这是前端攻城师必 ... -
css中的大于号是什么意思
2014-09-11 11:25 1152css中的">"表明class样式只 ... -
如何在IE7下兼容半透明
2014-08-24 09:51 465background:#3598DB; filter:al ... -
css实现背景透明文字不透明
2014-08-19 17:41 652设置元素的透明度: -moz-opacity:0.8; ... -
CSS选择器的权重与优先规则
2014-08-10 21:50 325我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对 ... -
CSS3特性:CSS3 target伪类
2014-07-08 15:36 465CSS3 target伪类是众多实用的CSS3特性中的一个。 ... -
CSS实现透明效果颜色的方法:RGBa
2014-03-31 20:33 787RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语 ... -
css reset重置基础代码
2014-04-01 10:18 490Eric Meyer html, body, div, ... -
CSS控制文本自动换行
2014-04-01 10:37 6201.你定死表格的宽度, ... -
常用的css命名规则
2014-06-22 23:56 466常用的css命名规则: 头:header 内容:con ...
相关推荐
移动端网页字号pt px em换算对照表.pdf移动端网页字号pt px em换算对照表.pdf移动端网页字号pt px em换算对照表.pdf
em指字体高,任意浏览器的默认字体高都是16px,所以未经调整的浏览器都符合: 1em=16px,详细了解请参考本
em、px、pt的换算关系如下: 1em=16px 1em=12pt 1px=1/16 em=0.0625em 1px=3/4 pt=0.75pt 1pt=1/12 em≈0.0833em 1pt=4/3 px≈1.3333px em、px、pt的转换工具如下,结果如无法除尽,小数点后面四舍五入到4位,我用...
1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,...
1、“Ems”: em,大小不固定 ,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级), 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展,2em = 32px , 目前常用的字体大小px换算成em , 16px =...
懒人推动进步,简化px,em,rem的换算
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面给大家详细介绍下。 PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的...
px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。 2、em 参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。 字体大小同样都是1.5em,但是效果却截然...
如何对S7-200 的 CPU224XP 和扩展模块EM 231, EM 232 及 EM 235 的模拟量值进行比例换算?
css中单位px和em的区别
这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了, em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情 这样...
之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来...为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只
说说css的几种距离吧,大致有px、em、pt、pc、in、mm、cm、ex八种,其中最常见到的是px,我还见到过的有ex和mm、cm,当然后两个在当年见的更多
我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1. IE无法调整那些使用px作为单位的字体大小;...
css中的长度单位在网页布局中经常会用到(em/ex/px/pt),至于在什么情况下使用,怎么用将在下文为大家详细介绍下
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算...