em px pt单位介绍及换算
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像素单位。
em px pt单位介绍及换算的更多相关文章
- css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- 必备:常用px,pt,em换算表(转)
常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...
- CSS文字大小单位px、em、pt(转)
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- 你应该知道的CSS文字大小单位PX、EM、PT[转]
摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平 ...
- 你应该知道的CSS文字大小单位PX、EM、PT
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用 ...
- CSS文字大小单位PX、EM、PT
老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的"95 ...
- CSS文字大小单位px、em、pt详解
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- HTML中字体单位px pt em之间的转换
在实现打印功能时,遇到一个问题,使用px作为单位在不同的机器或者打印机上打印出的字体大小不一样,所以经过查询,发现使用pt为单位能够进行物流适配,下面是各单位之间的转换: 定义字体大小有常见三种单位, ...
随机推荐
- bzoj 2753: [SCOI2012]滑雪与时间胶囊 -- 最小生成树
2753: [SCOI2012]滑雪与时间胶囊 Time Limit: 50 Sec Memory Limit: 128 MB Description a180285非常喜欢滑雪.他来到一座雪山,这 ...
- TreeMap(红黑树)源码分析
1. HashMap.Entry(红黑树节点) private static final boolean RED = false; private static final boolean BLACK ...
- 吴恩达-coursera-机器学习-week2
四.多变量线性回归(Linear Regression with Multiple Variables) 4.1 多维特征 4.2 多变量梯度下降 4.3 梯度下降法实践1-特征缩放 4.4 梯度下降 ...
- rails 数据迁移 -migration
1.创建一个fruits 项目: rails new fruits -d mysql --skip-bundle 2.修改Gemfile: source 'https://gems.ruby-chin ...
- Java删除ArrayList中的重复元素
Java删除ArrayList中的重复元素的2种方法 ArrayList是Java中最常用的集合类型之一.它允许灵活添加多个null元素,重复的元素,并保持元素的插入顺序.在编码时我们经常会遇到那种必 ...
- mysql导入csv文件
今天尝试将Oracle中的数据导入到mysql中,在SQLyog工具其中看到一些sql语句,拿来记录一下,说不定以后就用的着呐! -----查看ydtf数据库中的基础表,就是用户创建了哪些表 SHOW ...
- [Go] 通过 17 个简短代码片段,切底弄懂 channel 基础
关于管道 Channel Channel 用来同步并发执行的函数并提供它们某种传值交流的机制. Channel 的一些特性:通过 channel 传递的元素类型.容器(或缓冲区)和 传递的方向由“&l ...
- 【Go命令教程】12. go tool pprof
我们可以使用 go tool pprof 命令来交互式的访问概要文件的内容.命令将会分析指定的概要文件,并会根据我们的要求为我们提供高可读性的输出信息. 在 Go 语言中,我们可以通过标准库的代码包 ...
- google打不开怎么办?谷歌打不开的解决方法
www.ggfwzs.com 我是在这里安装插件,安装后可以打开google http://jingyan.baidu.com/article/b907e627d67ad646e6891c52.htm ...
- 解决Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COER
今天在用java与mysql数据库时发现Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COER ...