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像素单位。
- 浏览: 77369 次
- 性别:
文章分类
最新评论
发表评论
-
CSS滤镜让图片模糊(毛玻璃效果)
2015-02-03 08:51 1004<img src="mm1.jpg" ... -
HTML head 头标签
2014-12-05 20:13 526HTML head 头部分的标签、元素有很多,涉及到浏览器对网 ... -
css元素隐藏原理及display:none和visibility:hidden
2014-10-23 17:13 778一、CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼 ... -
html中怎么去掉input获取焦点时候的边框
2014-10-20 17:01 1321css设置属性:outline:none; -
select控件option里加链接
2014-10-19 17:25 13151、select控件option里加链接 <se ... -
css之让文字排在图片的右边的中心位置
2014-10-13 10:54 988<dl> < ... -
JavaScript 下拉菜单实现代码
2014-10-12 13:57 529利用css+js实现的下拉菜单。通过getElementsB ... -
Css Sprite
2014-09-14 17:43 502Css Sprite也被为CSS精灵,这是前端攻城师必 ... -
css中的大于号是什么意思
2014-09-11 11:25 1222css中的">"表明class样式只 ... -
如何在IE7下兼容半透明
2014-08-24 09:51 504background:#3598DB; filter:al ... -
css实现背景透明文字不透明
2014-08-19 17:41 689设置元素的透明度: -moz-opacity:0.8; ... -
CSS选择器的权重与优先规则
2014-08-10 21:50 365我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对 ... -
CSS3特性:CSS3 target伪类
2014-07-08 15:36 520CSS3 target伪类是众多实用的CSS3特性中的一个。 ... -
CSS实现透明效果颜色的方法:RGBa
2014-03-31 20:33 841RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语 ... -
css reset重置基础代码
2014-04-01 10:18 561Eric Meyer html, body, div, ... -
CSS控制文本自动换行
2014-04-01 10:37 6561.你定死表格的宽度, ... -
常用的css命名规则
2014-06-22 23:56 508常用的css命名规则: 头:header 内容:con ...
相关推荐
移动端网页字号pt px em换算对照表.pdf移动端网页字号pt px em换算对照表.pdf移动端网页字号pt px em换算对照表.pdf
1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,...
在CSS中设置字体大小时,开发者经常遇到四种单位:em、px、pt和百分比(%)。这些单位在使用时各有特点和适用场景,下面详细解释它们之间的关系及换算方式。 首先,"em"是一个相对单位,它基于当前元素的字体大小。...
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位,我用...
本文将详细解析CSS中最常见的几种长度单位:px、em、pt,以及其他的长度单位如pc、in、mm、cm、ex。 首先,`px`(像素)是最常用的长度单位,它代表显示器上的一个物理像素。由于显示器的分辨率通常以像素为单位,...
1.px,em,pt之间的换算关系1em = 16px1px = 1/16 em = 0.0625em ////以下用的比较少//////1em = 12pt1px = 3/4 pt = 0.75pt1pt = 1/12 em 0.0833em1pt = 4/3 px = 1.3333px 2.任意浏览器默认字体都是16px。所有未经...
em 元素的字体高度The height of the element's font ex 字母x的高度The height of the letter "x " px 像素Pixels % 百分比Percentage 绝对长度单位(absolute length unit)in 英寸Inches (1 英寸 = 2 .54 厘米 ) cm...
2. **掌握转换规则**:了解单位间的换算规则,比如1em等于元素的字体大小,1rem等于根元素的字体大小,1px通常是一个物理像素。 3. **实践应用**:在实际项目中运用"Web Unit Converter",解决布局和样式调整时的...
在控制UI组件的尺寸方面,Vaadin使用了多种单位,包括像素(px)、点(pt)、派卡(pc)、em、ex、毫米(mm)、厘米(cm)、英寸(in)和百分比(%)。像素是物理单位,表示屏幕上一个点的大小。点、派卡都是印刷单位,与英寸有...