`
天梯梦
  • 浏览: 13612527 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

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

 
阅读更多

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

px单位

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

pt单位

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

em单位

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

rem单位

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

Pixels EMs Percent Points
6px 0.375em 37.50% 5pt
7px 0.438em 43.80% 5.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

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

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

 

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

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

 

 

 

 

 

 

分享到:
评论

相关推荐

    css中的px、em、rem、pt 特点和区别及换算详解

    1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,...

    详解CSS3 rem(设置字体大小) 教程

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

    px:将标准 CSS 测量值转换为像素单位的 jQuery 插件

    一些单位如 'em' 和 '%' 是相对于当前字体大小的。 如果未指定,'body' 将用于需要上下文的单元。 大小(可选) 应测量的数字和 CSS3 单位或常数。 该数字可以是整数或浮点数,并且可以以符号 (-/+) 开头。 单位...

    css 字体单位之间的区分以及字体响应式的实现详解

    1.px,em,pt之间的换算关系1em = 16px1px = 1/16 em = 0.0625em ////以下用的比较少//////1em = 12pt1px = 3/4 pt = 0.75pt1pt = 1/12 em 0.0833em1pt = 4/3 px = 1.3333px 2.任意浏览器默认字体都是16px。所有未经...

    举例详解CSS中的字体尺寸设置

    常用单位 在CSS中可以用很多不同的方式来...这里主要关注这几个单位:px、pt、%、em、rem和vw。它们之间有什么区别? 从概念上很难理解这些单位之间的差别,所以下面用一些实例来说明。例1. 默认设定 当你不设定字体

    tastebile:日常代码归类整理总结学习

    基础部分HTMLCSS box-sizing属性详解 CSS的选择器有哪些 CSS伪类、伪元素用法介绍 CSS单位px、pt、em、rem介绍 CSS清除浮动的方法有哪些 Postcss用法 CSS图形动画 纯CSS3绘画之眨眼的螳螂 纯CSS3绘画之小黄人 蝙蝠侠...

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    CSS中的字体大小设置属性总结

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

    浅谈CSS中的尺寸单位

    浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。 概览 绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 ...

    ElementQuery:一个用于创建 css 元素查询的小 api。 当媒体还不够时

    元素查询支持大多数单位(px、em、%、rem、in、cm、vh、vw、pc、pt、mm、vw、vh、vmin、vmax)并且能够自定义滚动你自己的,这个插件是高度可扩展的. 通过向全局实例添加自定义处理器,监听区域变化、高度、宽度、...

Global site tag (gtag.js) - Google Analytics