CSS单位 px pt em和rem 之间的区别

魄竹 2015-10-15

CSS中可以定义大小的单位有四种px，pt，em，rem，而px可以说在网页开发中最常见的单位了。不过现在如今的大多数网站已经开始用rem这个单位了。那么这四个单位有什么区别呢？

 

px|pt|em|rem区别

px单位

px（像素），国内网站相对来说用得比较多，任意浏览器的默认字体高都是16px。

pt单位

pt是point，是印刷行业常用单位，等于1/72英寸。

em单位

 em才是真正的“相对单位”，它不是一个具体的数值，而是相对于父元素的属性计算出来的大小，一般移动终端布局用em比较合适。

rem单位

rem单位是CSS3中新增的一个相对单位，只不过它要比em单位强大一些，因为它是集相对大小和绝对大小的 优点于一身，也就是说它除了有px，pt 的绝对大小属性外，还具备了em的相对大小属性。为什么呢？因为rem这个单位是相对于根元素HTML的。而如果我们想修改大小，只需修改根元素HMTL 的大小就可以了。除了IE8及更早的版本个，目前所有的主流浏览器均支持此属性。

 

PX-EM-百分比-pt之间的对应关系

PixelsEMsPercentPoints
6px0.375em37.50%5pt
7px0.438em43.80%5.5pt
8px0.5em50%6pt
9px0.563em56.30%7pt
10px0.625em62.50%8pt
11px0.688em68.80%8pt
12px0.75em75%9pt
13px0.813em81.30%10pt
14px0.875em87.50%11pt
15px0.938em93.80%11pt
16px1em100%12pt
17px1.063em106.30%13pt
18px1.125em112.50%14pt
19px1.188em118.80%14pt
20px1.25em125%15pt
21px1.313em131.30%16pt
22px1.375em137.50%17pt
23px1.438em143.80%17pt
24px1.5em150%18pt

 

转换公式：

pt=px乘以3/4
倍数em=倍数x16px

总结：每一个单位都有其存在的理由，只不过新出现的单位会更优，更方便。不管你在网站建设中用哪一个单位都没人 会说 你，只是新东西出来了，你不用，你就掉队了。在这里强烈推荐使用rem单位，不过也要注意属性的兼容性，IE8以下不支持rem，所以用rem好还是不用 rem好还得看你项目的目标用户，毕竟你的网站不是做给自己看的。

原文：http://yunkus.com/article/div/218.html

转自：CSS单位 px pt em和rem 之间的区别

魄竹

魄竹

相关推荐

移动端布局单位介绍之rem

首先先将几个主要概念讲一下；移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。前端开发中布局是将主要的html结构布置好。rem是一种长度单位，是而且仅是根据根元素html改变的长度单位。Root e

JKjiang / 0评论 2020-07-30

css rem

它的全称是 font size of the root element 它是CSS3中新增加的一个尺寸（度量）单位，根节点的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于。浏览器的默认的font-size是16px，1rem默认就等

葉無聞 / 0评论 2020-06-06

rem在手机移动端app中的兼容适配问题

‘initial-scale=‘ + iScale + ‘,minimum-scale=‘ + iScale + ‘,maximum-scale=‘ + iScale + ‘,user-scalable=no" />‘). // 获取浏览器

发条戏子 / 0评论 2020-05-30

代码（移动端rem初始化设置1rem=15px）

这是之前项目的rem基本设置，这样，在vscode中安装cssrem插件后，改成1rem=15px，其他的屏幕也将得到相应适配。

hxmilyy / 0评论 2020-05-11

CSS之em、rem、px区别介绍

　　rem是相对于根目录的，所有它会随HTML元素的属性变化而变化

尚衍亮 / 0评论 2020-04-24

angular9 如何 增加 webpack配置 并将px转换为rem

"builder": "@angular-builders/custom-webpack:browser", 这里进行替换。一共需要替换两处，添加一处信息 具体替换，注意 如果需要使用postcss-loader 需

csm0 / 0评论 2020-03-05

移动端布局，字体使用rem不生效问题

移动端布局是最让我感到头疼的一件事，一直都是逃避的心态，不想面对，但没办法，公司前端就我一个人，所有的问题迟早都要自己解决，所以不得不开始摸索，最快的办法就是看前辈们都是怎么解决的，但是有些办法不一定适合自己，要挨个试，才知道哪个方法好用，这次我就来记录一

haolt00 / 0评论 2020-02-23

rem适配布局---3. less

less是一门CSS扩展语言，也成为CSS预处理器，作为CSS一种形式的扩展，并没有减少CSS的功能，而是在现有的CSS语法之上，为CSS加入程序式语言的特性。它在CSS语法的基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的

nicepainkiller / 0评论 2020-01-01

九、响应式发：rem和less（适配移动端）

//记录到devDependencies中，因为这是我们在开发中使用的而非在生产中使用。// prevent webpack from injecting useless setImmediate polyfill because Vue. // prev

Enjoyendless / 0评论 2020-01-11

bat 与 PowerShell 的结合使用

首先批处理的数字有一定范围，其次超出范围的比较情况还有不同。rem == The tools develop for copy files to external disk ==. for /f "tokens=1,* delims= &qu

赵家小少爷 / 0评论 2019-12-25

移动端Rem适配（基于vue-cli3 ，ui框架用的是vant-ui）

介绍postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值。下面提供了两种方法解决这种第三方框架的组件出现缩小的问题，下面均以vant-ui为例：。在根目录下新建postcs

87354091 / 0评论 2019-12-23

Vue中rem与postcss-pxtorem的应用详解

rem是根元素中的font-size值。rem布局不多赘述，有很多详细说明rem布局原理的资料。简单的说，通过JS获取设备宽度动态设定rem值，以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果。const baseSize = 192; //

oKeYue / 0评论 2019-11-20

【HTML + CSS】CSS 响应式布局（一）

物理像素：设备的屏幕实际像素点，如常说的 iPhone 6 Plus的分辨率是 1920 * 1080 像素。rem是 CSS的计量单位，表示相对于根元素的字体大小。其主要用于移动 Web开发，以适配不同尺寸的屏幕。我们将网页根元素的字号设置为 12px,

zuncle / 0评论 2019-11-18

vue 2.0 及 vue 3.0 rem配置

.clientWidth) / 10 + ‘px‘;

zdj / 0评论 2019-11-08

「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

发表于尚妆github博客，欢迎订阅。首先会介绍375px方案和rem方案的实现原理。具体的开发前提是设计师给到一份750px宽的设计稿，前端同学根据ps量的像素的50%进行css书写。达到在屏幕上完整呈现布局上的内容。但是在同样的安卓原生浏览器上，不管我

csdnuuu / 0评论 2019-11-05

vue-cli3.0 移动端px转rem以及vue-cli3.0搭建等

vue-cli3 项目postcss-pxtorem的配置放在vue.config.js中。selectorBlackList: [".van"],// 要忽略的选择器并保留为px。propList: ["*"],

tomli / 0评论 2019-11-04

rem 适配布局 + LESS + 媒体查询

　rem 是一个相对单位，类似于 em ，em 是父元素字体大小。　比如：根元素设置的 font-size=12px；非根元素设置 width：2rem；则换成px 表示 24px. 　　@media mediatype and | not | only

CaiKanXP / 0评论 2019-11-02

在安卓手机中rem单位border-radius:50%画圆变形的解决方案

};使用border-radius:50%,或者border-radius的值与宽高相等，都可实现一个完美的圆形，但是在不同的安卓手机中，会有不同程度的变形；当使用px做为宽高的单位，border-radius:50%画出来的圆是不会变形的；但使用rem时

绿豆饼 / 0评论 2019-10-20

font-size : Rem

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element”。下面我们就一起来详细的了解rem。前面说了“em”是相对于其父元素来设置字体大小的，这样

qianxiaona / 0评论 2014-06-29

css中单位px和em,rem的区别

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？像素px是相对于显示器屏幕分辨率而言的。所有未经调整的浏览器都符合: 1em=16px。选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最

wangnantjobj / 0评论 2015-08-28

手机端页面自适应解决方案—rem布局

写移动端页面都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介绍的是本人在实践中用的最简单的布局方案——rem布局。先了解下REM是相对单位，是相对HTML根元素。rem的值目前有两种，一种是根

贱贱的梦想 / 0评论 2017-10-15

解决vue移动端适配问题

再聊移动端页面适配，rem和vw适配方案！基准：750设计稿；目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；――最大程度减少工作。很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性

Starxder / 0评论 2018-12-12

浅谈css3长度单位rem，以及移动端布局技巧

rem是css3中新增加的一个单位属性,根据页面的根节点的字体大小进行转变的单位。root！！！！！！！！！例：(下面例子中的根节点是html ，它的字体大小是100px，所以根节点下面的元素所设置的rem，都是1rem=100px。)rem的初始值是16

SuiKaSan的自学室 / 0评论 2018-12-10

SVN备份

最近研究Windowssvn的备份机制，结合网上的文章，分享下完成的svndump的备份脚本，记录一下svnsync的使用方法。不多说了，直接贴脚本。echo backup -base SVN_PATH -rep REPOSITORY [-full

dingyun00 / 0评论 2016-02-25

px rem区别

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。rem：相对单位，可理解为”rootem”,相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9

86251940 / 0评论 2019-06-14

一次搞懂CSS字体单位：px、em、rem和%

对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。“网页”和“印刷”的单位若要

切慕溪水 / 0评论 2019-07-01

（淘宝无限适配）手机端rem布局详解（转载非原创）

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。以上代码中给出的7个范围下的font-size不

冯二爷 / 0评论 2019-07-01

基于 less,sass,stylus三种预处理rem

@{name}: @px / @fontSizeBase * 1rem;.px2rem(fontsize, 750);font-size: 10rem;#{$name}: $px / $fontSizeBase * 1rem;@include px2rem

碎冰stylus融 / 0评论 2019-07-01

在安卓手机中rem单位border-radius:50%画圆变形的解决方案

}画了个圆，在ios中效果很理想。但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过ios。当使用px做单位，border-radius 50%出来的圆是不会变形的，可能是安卓在rem计算过程中产生误差或者有什么其他因素造成的渲染问题。网上有很

xzw / 0评论 2019-06-30

freemarker rem

default}读取堆栈：<#assign code=((stack.findString("#parameters['code']"))?

86334592 / 0评论 2013-08-25

手机端页面自适应解决方案—rem布局

写移动端页面都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介绍的是本人在实践中用的最简单的布局方案——rem布局。先了解下REM是相对单位，是相对HTML根元素。rem的值目前有两种，一种是根

二毛妮子 / 0评论 2017-10-15

css 基础之 em 与 rem

} em 是将 em 值乘以使用 em 单位的元素字体大小。

dazhifu / 0评论 2017-02-27

CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的

NARUTOLUOLUO / 0评论 2016-11-03

移动端开发单位——rem，动态使用

移动端开发-大纲一、移动web开发和适配1、特点：跑在手机端的web页面、 跨平台、基于webview、告别IE拥抱webkit、更高的适配和性能要求小技巧：在调试窗口中，选中“computed -> Show all”,就会显示标签元素的全部样式。

FoolishInfanta / 0评论 2019-06-28

chrome浏览器CSS字体大小小于12px不起作用解决方法

important;}由于chrome浏览器最小文字大小不能小于12px,因此这样设置，实际上rem不是真实的10px;

HealerJJJ / 0评论 2016-09-05

CSS3 px 和 em 和 rem

但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。em 实质

realitycss / 0评论 2016-08-18

app web中css使用rem单位 + js 全适配所有大小手机

rem和em单位区别不在过多赘述；在css文件中设置全局html的font-size：100px;将所有的元素高，宽，margin，padding全部换算成rem；如：原先200px高的元素现在是height：2 rem；做到这一步其实和用px做单位没什么

武林半侠 / 0评论 2016-06-23

如何更愉快地使用rem —— 别说你懂CSS相对单位

前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，

lanzhusiyu / 0评论 2019-06-27

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。在pc端，通常认为css中,1px所表示的真实长度是固定的。答案是否定的，下面图1.1和图1.2分别表示pc端下和移动端下的显示结果，在网页中我们设置的font-siz

coulder / 0评论 2019-06-27

CSS3 px em rem 单位说明

像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸。所有未经调整的浏览器都符合: 1em=16px。目前，除了IE8及更早版本外，所有浏览器均已支持rem。px是固定像素，em是相对父元素字体大小的百分比,比如div

ajhongshaorou / 0评论 2015-12-23

彻底弄懂css中单位px和em,rem的区别

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？像素px是相对于显示器屏幕分辨率而言的。所有未经调整的浏览器都符合: 1em=16px。选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最

JenniferMuMu / 0评论 2015-09-09

css中单位px和em,rem的区别

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？像素px是相对于显示器屏幕分辨率而言的。所有未经调整的浏览器都符合: 1em=16px。选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最

淡风wisdon大大 / 0评论 2015-08-28

css中的几个单位——rem，视口单位和ch

remrem是设计响应式网页的神器，因为rem单位是相对HTML元素的font-size属性的，因此当使用rem作为属性单位时，当改变HTML元素的font-size，其他使用rem作为单位的元素也会跟着适配大小。用css媒体查询用相当于视口宽度单位的vw

wcssdu / 0评论 2019-06-27

deletesvn.bat

Remfor/f"delims="%%bin('dir/b/s/a-d%%a\1.bak2^>nul')dodel"%%b"/a/q/f. Remfor/f"skip=1delims="%i

luyibo / 0评论 2011-04-21

前端移动端适配方案之rem之小白解惑

移动端适配-rem:认识移动端做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下；逻辑像素和物理像素的概念需要消化消化，css中的px对应的实际上是逻辑像素，比如这里写个width:375px,是可以铺

Miryou / 0评论 2019-06-27

Vue-cli webpack实现移动端rem自动化，自适应任何设备

1 安装vue-cli略2 sass和postcss-px2rem第一步 ：安装sass 部分cnpm install sass-loader --save-Dcnpm install node-sass --save-Dpostcss-px2rem 部分

DaDomain / 0评论 2019-06-27

jprofile 配置 以及jvm参数配置

remor"run"commandisexecuted.rem%CATALINA_BASE%\temp.rem"stop",or"run"commandisexecuted.rem-Xdebug-

Simbacheng / 0评论 2011-01-22

CSS3 设置字体自适应 font-size:xx rem

CSS3新引入了一个字体单位,rem是相对于根节点的。在使用时我们可以这样写html{font-size: 62.5%;}. /*62.5%是相对于16px计算得来的，相当于10个计量单位，为了后面计算字体大小*/但是问题来了，因为CSS3 IE6-8不支

lanzhusiyu / 0评论 2014-07-25

Atom 编辑器插件: px2rem-plus 转换 px(像素) 到 rem 单位

对于移动端网页的开发，目前看采用 rem 单位可能是一个相对完美的解决方案。在平时的开发中经常需要把 px 转换成 rem。由于我目前主要使用 Atom 这个编辑器来开发，也用了一些类似的转换插件，但都不能令我满意，所以自己开发了一个 Atom 插件。转换

ciscoccie00 / 0评论 2019-06-21