关闭

EM, PX, PT, CM, IN…

280人阅读 评论(0) 收藏 举报
分类:

EMPXPTCMIN

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?

No, the units have nothing to do with the properties, but everything with the output media: screen or paper.

There is no restriction on which units can be used where. If a property accepts a value in px (margin: 5px) it also accepts a value in inches or centimeters (margin: 1.2in; margin: 0.5cm) and vice-versa.

But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:

  Rec­om­mended Oc­ca­sional use Not rec­om­mended
Screen em, px, % ex pt, cm, mm, in, pc
Print em, cm, mm, in, pt, pc, % px, ex  

The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc

If you have a ruler handy you can check how precise your device is: here is a box of 1in (2.54cm) high:
72pt

The so-called absolute units (cmmminpt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It's better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you'll probably not get what you expect.

In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.

CSS doesn't define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.

There is another reason to avoid absolute units for other uses than print: You look at different screens from different distances. 1cm on a desktop screen looks small. But the same on a mobile phone directly in front of your eyes looks big. It's better to use relative units, such as em, instead.

The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as text-indent: 1.5em and margin: 1em are extremely common in CSS.

The ex unit is rarely used. Its purpose is to express sizes that must be related to the x-height of a font. The x-height is, roughly, the height of lowercase letters such as a, c, m, or o. Fonts that have the same size (and thus the same em) may vary wildly in the size of their lowercase letters, and when it is important that some image, e.g., matches the x-height, the ex unit is available.

The px unit is the magic unit of CSS. It is not related to the current font and usually not related to physical centimeters or inches either. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like an e-book reader? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

Nowadays there are devices that could in principle display smaller sharp dots (although you might need a magnifier to see them). But documents from the last century that used px in CSS still look the same, no matter what the device. Printers, especially, can display sharp lines with much smaller details than 1px, but even on printers, a 1px line looks very much the same as it would look on a computer monitor. Devices change, but the px always has the same visual appearance.

In fact, CSS requires that 1px must be exactly 1/96th of an inch in all printed output. CSS considers that printers, unlike screens, do not need to have different sizes for px in order to print sharp lines. In print media, a px thus not only has the same visual appearance from one device to another, but indeed it is measurably the same.

CSS also defines that raster images (such as photos) are, by default, displayed with one image pixel mapping to 1px. A photo with a 600 by 400 resolution will be 600px wide and 400px high. The pixels in the photo thus do not map to pixels of the display device (which may be very small), but map to px units. That makes it possible to exactly align images to other elements of a document, as long as you use pxunits in your style sheet, and not ptcm, etc.

USE EM OR PX FOR FONT SIZES

CSS inherited the units pt (point) and pc (pica) from typography. Printers have traditionally used those and similar units in preference to cm or in. In CSS there is no reason to use pt, use whichever unit you prefer. But there is a good reason to use neither pt nor any other absolute unit and only use em and px.

Here are a few lines of different thickness. Some or all of them may look sharp, but at least the 1px and 2px lines should be sharp and visible:

0.5pt, 1px, 1pt, 1.5px, 2px

If the first four lines all look the same (or if the 0.5pt line is missing), you are probably looking at a computer monitor that cannot display dots smaller than 1px. If the lines appear to increase in thickness, you are probably looking at this page on a high-quality computer screen or on paper. And if 1pt looks thicker than 1.5px, you probably have a handheld screen.

The magic unit of CSS, the px, is a often a good unit to use, especially if the style requires alignment of text to images, or simply because anything that is 1px wide or a multiple of 1px is guaranteed to look sharp.

But for font sizes it is even better to use em. The idea is (1) to not set the font size of the BODY element (in HTML), but use the default size of the device, because that is a size that the reader can comfortably read; and (2) express font sizes of other elements in emH1 {font-size: 2.5em} to make the H1 2½ times as big as the normal, body font.

The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.

The px unit thus shields you from having to know the resolution of the device. Whether the output is 96 dpi, 100 dpi, 220 dpi or 1800 dpi, a length expressed as a whole number of px always looks good and very similar across all devices. But what if you do want to know the resolution of the device, e.g., to know if it is safe to use a 0.5px line? The answer is to check the resolution via Media Queries. Explaining Media Queries is out of scope for this article, but here is a small example:

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

MORE UNITS IN CSS

To make it even easier to write style rules that depend only on the default font size, CSS has since 2013 a new unit: the rem. The rem(for “root em”) is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document. E.g., to give P and H1 elements the same left margin, compare this pre-2013 style sheet:

p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }

with the new version:

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

Other new units make it possible to specify sizes relative to the reader's window. These are the vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height. There is also vmin, which stands for whichever is the smallest of vw and vh. And vmax. (You can guess what it does.)

Because they are so new, they don't work everywhere yet. But, as of early 2015, several browsers support them.

Bert Bosstyle activity lead
Copyright © 1994–2016 W3C®

CREATED 12 JAN 2010;
LAST UPDATED SAT 03 DEC 2016 06:20:31 AM UT


原文来自:www.w3.org/Style/Examples/007/units.en.html

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

css中单位px、pt、em和rem的区别

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) px 特点: 1. IE无法调整那些使用px作...
  • kataerdeshui
  • kataerdeshui
  • 2014-05-23 11:17
  • 18989

CSS Font-Size: em、px 、pt 、Percent之间的关系及换算

一、基础介绍 1、“Ems”: em,大小不固定 ,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级), 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展,2em = 32px , 目前常用的字体大小px换算成em , 16px = 1em; 14p...
  • mosci
  • mosci
  • 2016-05-06 17:25
  • 1082

CSS中那些px、em、pt、rem、%、dp(android)单位

未经允许,不得转载!! 水平有限,写的不周之处欢迎指正、交流! 在前端开发中,遇到单位的时候会有几种选择,那到底用哪种单位才是最合适的呢? 在国内的一些美工设计大师,在设计的时候多偏向于px单位,而在国外呢,大多喜欢使用em和rem作为单位。 一、px单位(pixel相对长度单位)相对于用户...
  • ime33
  • ime33
  • 2017-01-14 10:28
  • 3129

px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结

首先我们大致了解一下每个简称的含义,他们都是在设备中表示长度: px:(pixel)像素,像素px是相对于显示器屏幕分辨率而言的(引自CSS2.0手册)。电子屏幕上组成一幅图画或照片的最基本单元; pt: (point)点,印刷行业常用单位,等于1/72英寸,就是我们在Word或者WPS等办公软件中...
  • flyingpig2016
  • flyingpig2016
  • 2017-03-01 10:06
  • 1597

css3大小单位px、pt、em和rem的区别

css3大小单位px、pt、em和rem的区别   国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自...
  • einsteingauss
  • einsteingauss
  • 2015-06-08 14:29
  • 2274

浅谈CSS单位px、pt、em和rem

1、em em实质是一个相对值,而非具体的数值,因此需要一个参考点,一般都是以的font-size为基准,也即body元素的任何子元素的em值都等于font-size设置的大小。 由于em是相对于父元素计算的,因此多层嵌套情况下,每层都会从父元素继承em值,需要进行多次计算。 HTML: ...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-04-13 21:56
  • 535

CSS长度单位:vh、vw、vmin、vmax、em、rem、ex、ch、px

CSS的长度单位。 一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。 长度单位包括包括:相对单位和绝对单位。 相对长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin 绝对长度单位包括有: cm, m...
  • liyuxing6639801
  • liyuxing6639801
  • 2017-04-28 20:54
  • 650

web前端常用长度单位(px,em,rem,pt)

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.5em, 1e...
  • zhs45656
  • zhs45656
  • 2016-08-03 10:24
  • 2941

浅谈iOS尺寸单位pt、ppi与px

1、屏幕尺寸 通常所说的iPhone3GS屏幕尺寸为3.5英寸、iPhone4屏幕尺寸为4英寸,指的是显示屏对角线的长度。   2、iOS尺寸单位 1) px: 像素,是物理屏幕显示的基本单位,即使在程序中使用的不是px,但最后都会转化为px,显示在手机上。 2) pt...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-04-15 10:22
  • 1485

IOS界面适配一: Pt与Px的关系

参考链接 : iPhone屏幕尺寸、分辨率及适配      在IOS界面开发中,我们一般是使用pt(Point)来作为View的单位,它是一个标准的长度单位,1pt=1/72英寸   而px即为我们所说的像素,虽然我们使用的是pt,但是其最后都会转化...
  • wingsofPiano
  • wingsofPiano
  • 2015-08-07 20:23
  • 12395
    个人资料
    • 访问:1501569次
    • 积分:8721
    • 等级:
    • 排名:第2576名
    • 原创:124篇
    • 转载:88篇
    • 译文:0篇
    • 评论:55条
    文章分类
    最新评论