PX、PT、EM、ex和in等都是我们常用的长度单位，尤其在网页的字体大小中经常用到。但是你知道PX、PT和EM之间是如何进行准换的吗？这里icech为大家找到了一个px、pt、em和percent大小转换的一个表格，尤其针对字体大小的转换十分方便。希望大家能够喜欢！

PX和PT转换的公式：

以前icech在文章中介绍过PX和PT的转换规则，其实很简单，pt=px乘以3/4。
比如12px×3/4=9pt大小。

PX和em转换的公式：

对于PX转em的方法也类似，就是em=16乘以px，也就是说1.5em=1.5×16=24px。

设计中常用PX/EM/PT/百分比转换表格

Pixels EMs Percent Points
6px 0.375em 37.50% 5pt
7px 0.438em 43.80% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.30% 7pt
10px 0.625em 62.50% 8pt
11px 0.688em 68.80% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.30% 10pt
14px 0.875em 87.50% 11pt
15px 0.938em 93.80% 11pt
 
16px 1em 100% 12pt
17px 1.063em 106.30% 13pt
18px 1.125em 112.50% 14pt
19px 1.188em 118.80% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.30% 16pt
22px 1.375em 137.50% 17pt
23px 1.438em 143.80% 17pt
24px 1.5em 150% 18pt
 
 

常用长度单位PX/EM/PT/百分比转换公式与对照表的更多相关文章

  1. html px em pt长度单位(像素 相对长度 点)知识(转)

    html px em pt单位区 一.PX\EM\PT单位介绍 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的 ...

  2. 网页常见单位： px em pt % rem vw、vh、vmin、vmax ， rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  3. px/em/pt区别和转换

    老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的“95%的中国网 ...

  4. 02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗？

    1:废话不多说,直接看如下图表: 2:px就不过多介绍了,就是像素点的大小,加入您的屏幕分辨率为1920,则每一个相当于每一个有横着的1920个像素点: 3:em 为相对单位,一般以 body 内的 ...

  5. Html 字体大小单位 px em pt

    网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...

  6. pt和px区别 pt是逻辑像素，px是物理像素

    pt和px区别 pt是逻辑像素,px是物理像素字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是po ...

  7. px 与 pt

    px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便: pt:point,是一个标准的长度单位,1pt＝1/72英寸,用于印刷业,非常简单易用: em:即%,在CSS中,1em＝100 ...

  8. 前端常用长度单位（px，em，rem，pt）介绍

    CSS中有不少属性是以长度作为值的.盒模型的属性就是一些很明显的值属性:width.height.margin.padding.border.除此之外还有很多其他的CSS属性的值同样也是长度值,像偏移 ...

  9. （转）CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

随机推荐

  1. Python xlwt模块

    Examples Generating Excel Documents Using Python’s xlwt Here are some simple examples using Python’s ...

  2. Ionic3 demo TallyBook 实例1

    1.创建项目 ionic start  TallyBook  blank  创建一个空的项目 ionic cordova  platform  add android   添加andorid平台 io ...

  3. Elasticsearch基本命令

    检查集群运行情况:    GET ->   localhost:9200/_cat/health?v 查看集群节点列表:    GET ->   localhost:9200/_cat?n ...

  4. Online开发初体验——Jeecg-Boot 在线配置图表

    Online开发——初体验(在线配置图表) 01 通过JSON数据,快速配置图形报表 02 通过SQL数据,快速配置图形报表 03 图表模板配置,实现不同数据源图表合并展示 04 图表布局,支持单排. ...

  5. AppScan的基础使用

    AppScan是用于Web项目的安全测试工具,扫描网站所有url,自动测试是否存在各种类型的漏洞.AppScan安装在Windows环境上,版本越高,规则库越安全,扫描越全面.   1. 打开AppS ...

  6. springcloud(二)：Eureka服务注册与发现

    Spring Cloud Netflix  该项目是Spring Cloud的子项目之一,主要内容是对Netflix公司一系列开源产品的包装,它为Spring Boot应用提供了自配置的Netflix ...

  7. Java超简明入门学习笔记（零）

    Java编程思想第4版学习笔记(零) 前言          这个笔记本主要记录了我在学习Java编程思想(第4版,中文版)的过程中遇到的重难点及其分析.主要参考了C++11版本的C++语言,对比了它 ...

  8. Activiti流程图部署及流程图部分操作

    流程图部署有两种方式,一种是通过classpath,另一种是通过zip文件 通过classpath方式如下 public void deploymentProcessDefinition_classp ...

  9. 转载：Linux 安装Java

    1.到官网下载 jdk-8u131-linux-x64.tar.gz 官网地址:http://www.Oracle.com/technetwork/java/javase/downloads/jdk8 ...

  10. nfs 原理详解

    一.NFS介绍 1)什么是NFS 它的主要功能是通过网络让不同的机器系统之间可以彼此共享文件和目录.NFS服务器可以允许NFS客户端将远端NFS服务器端的共享目录挂载到本地的NFS客户端中.在本地的N ...