常用px,pt,em换算及区别
pt (point,磅):是一个物理长度单位,指的是72分之一英寸。
px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。
字号:是中文字库中特有的一种单位,以中文代号表示特定的磅值pt,便于记忆、表述。
pt和px的换算公式可以根据pt的定义得出:
pt=1/72(英寸), px=1/dpi(英寸)
因此 pt=px*72/dpi
以Windows下的96dpi来计算,pt=px*72/96=px*3/4
px是像素图像的基本采样单位,相对于显示器屏幕分辨率而已的,一个像素是什么呢,把一张图一直放大,会看到一个个小的方格,一个方格就是一个像素。浏览器默认的字体大小是16px。
特点:字体大小写死固定了,是固定值,老版本IE无法缩放字体,但现在基本上都不用管低版本的IE。所以一般情况都会使用这种单位,够精确。
em是一个相对单位表示相对于其父亲元素字体的大小而言,可以是小数,整数。比如父元素字体大小是16px,则1em就是16px,2em就是32px。
特点:不是固定值,它的值会随着父字体大小而变化。使用场景:当当前元素的内外边距需要与当前字体大小成比例时,可以使用em。
rem也是一个相对单位
与em的区别:rem是相对于根元素而言的,这样在使用计算时就比em简单方便,因为他的参考值就是根元素子图大小,浏览器默认的是16px。
rem特点:相对于根元素字体大小,计算方便。可以通过控制html根字体大小来改变整个页面字体大小,是页面在尺寸的移动端自适应。
|
字号 |
pt |
px |
em |
|
初号 |
42pt |
56px |
3.5em |
|
小初 |
36pt |
48px |
3em |
|
34pt |
45px |
2.75em |
|
|
32pt |
42px |
2.55em |
|
|
30pt |
40px |
2.45em |
|
|
29pt |
38px |
2.35em |
|
|
28pt |
37px |
2.3em |
|
|
27pt |
36px |
2.25em |
|
|
一号 |
26pt |
35px |
2.2em |
|
25pt |
34px |
2.125em |
|
|
小一 |
24pt |
32px |
2em |
|
二号 |
22pt |
29px |
1.8em |
|
20pt |
26px |
1.6em |
|
|
小二 |
18pt |
24px |
1.5em |
|
17pt |
23px |
1.45em |
|
|
三号 |
16pt |
22px |
1.4em |
|
小三 |
15pt |
21px |
1.3em |
|
14.5pt |
20px |
1.25em |
|
|
四号 |
14pt |
19px |
1.2em |
|
13.5pt |
18px |
1.125em |
|
|
13pt |
17px |
1.05em |
|
|
小四 |
12pt |
16px |
1em |
|
11pt |
15px |
0.95em |
|
|
五号 |
10.5pt |
14px |
0.875em |
|
10pt |
13px |
0.8em |
|
|
小五 |
9pt |
12px |
0.75em |
|
8pt |
11px |
0.7em |
|
|
六号 |
7.5pt |
10px |
0.625em |
|
7pt |
9px |
0.55em |
|
|
小六 |
6.5pt |
8px |
0.5em |
|
七号 |
5.5pt |
7px |
0.4375em |
|
八号 |
5pt |
6px |
0.375em |
常用px,pt,em换算及区别的更多相关文章
- 必备:常用px,pt,em换算表(转)
常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...
- 常用px,pt,em换算表
pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(D ...
- px 和 em换算
常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...
- HTML-参考手册: Px、Em 换算工具
ylbtech-HTML-参考手册: Px.Em 换算工具 1.返回顶部 1. Px.Em 换算工具 以下工具提供了em和px的换算工具. 第一个输入框:设置了网页默认的字体像素 (通常 16px) ...
- px,pt,em,rem
一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...
- px、em、rem区别介绍
px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...
- css中字体单位px,pt,em,百分比之间的区别和用法
px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em 相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem 结合相对定位和绝对定位的优势,相对根元素htm ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
- rem、px、em之间的区别以及网页响应式设计写法
个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...
随机推荐
- Java工程师的终极书单
本份Java工程师的终极书单只在专业的Java技术博客–天天编码上发布,没有授权任何网站与个人转载. 坚持阅读好书是学习Java技术的好方式.但是,市面上与Java技术相关的书籍可谓数不胜数,如何从这 ...
- 通过添加filter过滤器 彻底解决ajax 跨域问题
1.在web.xml添加filter <filter> <filter-name>contextfilter</filter-name> <filter-cl ...
- HTLM5新增属性
1.<meta http-equiv="Pragma" content="no-cache"/> //禁止页面缓存 2.<script def ...
- ngin隐藏版本号
Nginx默认是显示版本号的,如: 这样就给人家看到你的服务器nginx版本,这样暴露出来的版本号就容易变成攻击者可利用的信息.所以,从安全的角度来说,隐藏版本号会相对安全些! 配置如下: 修改n ...
- (转)PL SQL Developer 使用总结
如果OS为windows 7 64位系统,Oracle版本为 Oracle 11g 64 安装PL SQL Developer 请参考 http://myskynet.blog.51cto.co ...
- app耗电优化之四 使用AlarmManager对任务进行合理安排
AlarmManager 是用来设定定时任务.即用来设定那个任务在什么时候开始执行.为什么和省电有关系?这个需要和AlarmManager的使用先说起.AlarmManager 实际上只起到一个定时发 ...
- ubuntu的/etc/modules内核模块文件
/etc/modules: 内核模块文件,里面列出的模块会在系统启动时自动加载. /etc/modprobe.d: 存放禁止加载或者加载内核模块脚本的目录. 以下是我增加netfilter模块是的流程 ...
- Eclipse、maven项目常见问题
阿里云maven仓库地址: <mirror> <id>nexus-aliyun</id> <mirrorOf>*</mirrorOf> &l ...
- CentOS 6 下无法wget https链接的解决方法
CentOS6下最高版本的wget是1.11,但非常遗憾的是这个版本有bug,是没办法用来下载https链接的东西的,所以有些人为了避免这种情况会帮脚本加上不检查ssl的参数--no-check-ce ...
- Redis-rdb持久化
Redis实现快照的过程 redis调用fork,现在有了子进程和父进程 父进程继续处理client请求,子进程负责将内存内容写入到临时文. 由于os的写时复制机制(copy on write)父子进 ...