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换算及区别的更多相关文章

  1. 必备:常用px,pt,em换算表(转)

    常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...

  2. 常用px,pt,em换算表

    pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(D ...

  3. px 和 em换算

    常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...

  4. HTML-参考手册: Px、Em 换算工具

    ylbtech-HTML-参考手册: Px.Em 换算工具 1.返回顶部 1. Px.Em 换算工具 以下工具提供了em和px的换算工具. 第一个输入框:设置了网页默认的字体像素 (通常 16px) ...

  5. px,pt,em,rem

    一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...

  6. px、em、rem区别介绍

    px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...

  7. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  8. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  9. rem、px、em之间的区别以及网页响应式设计写法

    个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...

随机推荐

  1. win10下安装python2与python3以及pip共存

    一 分别安装python2和python3 注意: 安装时记得勾选 Add Python.exe to Path 二 安装pip Python3最新版本有pip,无需安装 Python2: 下载pip ...

  2. python爬虫从入门到放弃(二)之爬虫的原理

    在上文中我们说了:爬虫就是请求网站并提取数据的自动化程序.其中请求,提取,自动化是爬虫的关键!下面我们分析爬虫的基本流程 爬虫的基本流程 发起请求通过HTTP库向目标站点发起请求,也就是发送一个Req ...

  3. HTML基础知识(未完待续)

    一.HTML编辑工具:Sublime Text 二.HTML实体字符:1.( 空格):&nbsp: 2.(<) &lt: 3.(>)&gt: 4.(&)&a ...

  4. 微信小程序开发基础知识总结

    微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很 ...

  5. 如何将Android Studio与华为软件开发云代码仓库无缝对接(二)

    上篇文章:如何将Android Studio与华为软件开发云代码仓库无缝对接(一) 上一章讲了,如何用Android Studio以软件开发云代码仓库为基础,新建一个项目.接下来,这一章继续讲建好项目 ...

  6. 完整版百度地图点击列表定位到对应位置并有交互动画效果demo

    1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo  ...

  7. docke镜像上传到dockerhub仓库和阿里云docker仓库的方法

    操作指南   1.  登录阿里云docker registry: $ sudo docker login --username=linjiaxin897591495 registry.cn-hangz ...

  8. (6)UIView常见属性二

    例如创建一个view视图,view是最纯洁的控制,必须得指定它的位置,而不像其他的控件像UISwitch默认都有一个位置 在viewDidLoad方法中打印它的位置: 将控件放入一个视图中,只需移动白 ...

  9. jmeter - 定时器

    jmeter提供了很多元件,帮助我们更好的完成各种场景的性能测试,其中,定时器(timer)是很重要的一个元件,最新的3.0版本jemter提供了9种定时器(之前6种),下面一一介绍: 一.定时器的作 ...

  10. 不受控制的 position:fixed

    本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥. 大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fix ...