掌握web开发基础系列--长度单位

4,258 阅读9分钟

思考一下

css中的长度单位有哪些?

px, ptemrem%vwvhvminvmcxexchcmmmin(inch)pc ···

我们常用的其实就是pxemrem%四种,下文中我们将对常用的长度单位重点分析,对非常用的长度单位简单介绍。 首先我们要知道css中的长度单位可以分为两类:相对长度单位绝对长度单位

相对长度单位

css相对长度单位中的 “相对” 二字,表明了其长度会随着它的参考值的变化而变化,不是固定的。所以,在使用相对长度单位之前一定要知道其 参考元素 是什么。

1、px (pixel)

思考:1px到底有多长?

关于px的相关信息 《CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport》 这篇文章中已经介绍的很详细很详细。下面对px进行概括总结。

浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是pxpx是一个相对单位,相对的是设备像素(device pixel),也就是物理像素,其相对性体现在在同一个设备上或在不同设备之间每1个px所代表的物理像素是可以变化的。

那么px到底是什么?

px实际是pixel(像素)的缩写,根据 维基百科的解释,它是图像显示的基本单元,既不是一个确定的物理量,也不是一个点或者小方块,而是一个抽象概念。所以在谈论像素时 一定要清楚它的上下文!一定要清楚它的上下文!一定要清楚它的上下文!

不同的设备,图像基本采样单元是不同的,显示器上的物理像素等于显示器的点距,而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为ppi和dpi:

ppi:每英寸多少像素数,放到显示器上说的是每英寸多少物理像素及显示器设备的点距。

dpi:每英寸多少点。

关于打印机的点距我们不去关心,只要知道 当用于描述显示器设备时ppi与dpi是同一个概念 。

CSS像素的真正含义

由于不同的物理设备的物理像素的大小是不一样的,所以css认为浏览器应该对css中的像素进行调节,使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ,目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算,而css规范中使用 参考像素 来进行换算。

1参考像素即为从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。它并不是1/96英寸长度,而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位(即1/96英寸)时视线与水平线的夹角。通常认为常人臂长为28英寸,所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

由于css像素是一个视角单位,所以在真正实现时,为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素。

这个换算过程有些烧脑,感兴趣的同学自己去研究css规范。下面两个不同设备物理像素转换为css像素的对比。

设备名称 屏幕(设备)分辨率 浏览器最大宽度(css像素)
14英寸MacBook PRO 2560dp x 1600dp 1440px
13.3英寸HP 440 G5 1366dp x 768dp 1366px

2、em

em用来适应用户所使用的字体,1em相当于当前的字体尺寸(font-size属性),2em相对于当前字体尺寸的2倍。

  • 如果当前元素的父元素设置了font-size,则em参考元素为其父元素。
  • 如果当前元素的父元素没有设置font-size,则逐级向上查找有设置font-size属性的元素,直到<html>根元素。
  • 如果当前元素的父元素向上所有父元素均没有设置font-size,则em其参考大小为浏览器默认大小 16px
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--此处样式可忽略-->
    <style>
        .box-out { text-align: center;width: 240px;height: 120px;margin-top: 10px;margin-left: 10px;
        border: 1px solid dodgerblue; float: left;}
        .box-inner {text-align: center;width: 180px;height: 60px;margin-top: 10px;margin-left: auto;
        margin-right: auto;border: 1px solid darkorchid; }
    </style>
</head>
<body>
    <div class="box-out">
        16px字体(浏览器默认大小)
        <div class="box-inner" style="font-size: 1em">
            1em字体
        </div>
    </div>
    <div class="box-out" style="font-size: 14px">
        14px字体
        <div class="box-inner" style="font-size: 1em">
            1em字体
        </div>
    </div>
    <div class="box-out" style="font-size: 14px">
        14px字体
        <div class="box-inner">
            <span style="font-size: 1.5em">1.5em字体,相当于(14*1.5 = 21)px</span>
        </div>
    </div>
    <div class="box-out" style="font-size: 24px">
        24px字体
        <div class="box-inner" style="font-size: 0.5em">
            <span style="font-size: 1.5em">1.5em字体,相当于(24*0.5*1.5 = 18)px</span>
        </div>
    </div>
</body>
</html>

妙招:段落首行缩进两个汉字

.indent {
    text-indent: 2em;
}

3、rem

remroot em,其参考元素为文档的根元素<html>font-size属性。

  • 如果文档根元素<html>没有设置font-size属性,那么当前元素rem相对于浏览器默认字体大小16px
  • 如果文档根元素<html style="font-size: 20px">设置了font-size属性,那么当前元素rem相对于文档的根元素<html>
<!DOCTYPE html>
<html lang="en" style="font-size: 20px">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--此处样式可忽略-->
    <style>
        .box-out { text-align: center;width: 240px;height: 120px;margin-top: 10px;margin-left: 10px;
        border: 1px solid dodgerblue; float: left;}
        .box-inner {text-align: center;width: 180px;height: 60px;margin-top: 10px;margin-left: auto;
        margin-right: auto;border: 1px solid darkorchid; }
    </style>
</head>
<body>
    <div class="box-out">
        20px字体(文档根元素字体大小)
        <!--此时em也相对于<html>上面的fontSize-->
        <div class="box-inner" style="font-size: 1em">
            1em字体,相当于20px
        </div>
    </div>
    <!--下面元素设置fontSize对子元素rem不起作用-->
    <div class="box-out" style="font-size: 12px">
        12px字体
        <div class="box-inner" style="font-size: 1rem">
            1rem字体,相当于20px
        </div>
    </div>
</body>
</html>

emrem 不仅仅是用于控制当前字体的大小,可以应用于各自可以设置长度的属性上,width、height···

4、百分比 - %

在做页面布局时需要知道的几个点:

  • 块级元素默认宽度width100%,默认高度height0
  • 块级元素的默认宽度100%是相对其父元素的宽度,父元素的宽度相对更上一级元素的宽度。

思考:为什么块级元素默认高度height0而不是100%
浏览器是如何计算高度与宽度的?

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度。

高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。更多相关内容请阅读 《为啥你的height:100%不起作用?》

5、vw、vh

vh vw全称为Viewport Height和Viewport Width 意思就是视窗 ,vh、vw是相对于视口的高度和宽度。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

例如:浏览器高度900px,宽度为750px, 1 vh = 9 px,1vw = 7.5 px。设置一个和屏幕同宽的标题,h1{font-size:100vw},那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和viewport大小同步的效果。

6、vmin、vmcx

vmin:vw和vh中较小的那个。 vmax:vw和vh中较大的那个。

例如,如果浏览器设置为1100px宽、700px高,1vmin会是7px,1vmax为11px。然而,如果宽度设置为800px,高度设置为1080px,1vmin将会等于8px而1vmax将会是10.8px

7、ex

当前字体的x-height(当前字体小写x的高度),在无法确定x高度的情况下以0.5em计算。

8、ch

数字0的宽度,无法确定时为0.5em。

绝对长度单位

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

注:在日常web开发中绝对长度单位的使用场景着实太少,简单了解即可。

1、cm

厘米

2、mm

毫米

3、in(Inch)

英寸

4、pt(Point)

点,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。用于印刷业。

5、pc(Pica)

派卡,相当于我国新四号铅字的尺寸。

参考文章

css长度单位
css中pt、px、em、ex、in等这类长度单位详细说明
css中单位em和rem的区别