CSS尺寸單位全解析：Web前端開(kāi)發(fā)的必備知識(shí)

當(dāng)?shù)夭恢砬榘髴?/span> 2024-12-19 10:17:16 瀏覽數(shù) (246)

反饋

在Web前端開(kāi)發(fā)中，掌握CSS尺寸單位是構(gòu)建響應(yīng)式和適配不同設(shè)備的關(guān)鍵。編程獅將在本文中為您詳細(xì)解讀CSS中的各種尺寸單位，幫助您在移動(dòng)端和桌面端都能游刃有余。

概覽

CSS尺寸單位分為絕對(duì)單位和相對(duì)單位，它們共同構(gòu)成了我們布局和設(shè)計(jì)的基礎(chǔ)。

絕對(duì)單位

絕對(duì)單位提供了一個(gè)固定的尺寸，不受顯示器或父元素的影響。

px (Pixel)：像素，基于設(shè)備屏幕分辨率。
```
div { font-size: 12px }
p { text-indent: 24px }
```
pt (Points)：磅，1 pt = 1/72 英寸。
```
div { font-size: 10pt }
p { height: 100pt }
```
pc (Picas)：派卡，印刷中使用的單位。
```
div { font-size: 10pc }
p { height: 10pc }
```

in (Inches)：英寸。

div { font-size: 10in }
p { height: 10in }

mm (Millimeter)：毫米。

div { font-size: 10mm }
p { height: 10mm }

cm (Centimeter)：厘米。

div { font-size: 10cm }
p { height: 10cm }

q (Quarter millimeters)：1/4毫米。
```
div { font-size: 20q }
p { height: 100q }
```

相對(duì)單位

相對(duì)單位則依據(jù)其他尺寸或比例來(lái)定義。

% (Percentage)：百分比，相對(duì)于父元素的寬度。

<body>
<div class="parent">
  <div class="children"></div>
</div>
</body>
<style>
.parent { width: 100px }
.children { width: 66.6% }
/* children的寬度為 66.6px */
</style>

em (Element meter)：根據(jù)當(dāng)前文檔對(duì)象內(nèi)文本的字體尺寸計(jì)算。
```
body { font-size: 14px }
.element { font-size: 16px; width: 2em; /* 2em === 32px */ }
```
rem (Root element meter)：根據(jù)根文檔(body/html)字體計(jì)算尺寸。
```
body { font-size: 14px }
.element { font-size: 16px; width: 2rem; /* 2rem === 28px */ }
```
ex (Height of the letter x)：文檔字符“x”的高度。
```
.x { height: 1ex; overflow: hidden; background: #aaa; }
```
ch (Width of the digit 0)：文檔數(shù)字“0”的寬度。
```
.0 { width: 10ch; overflow: hidden; background: #ccc; }
```

運(yùn)算

calc：允許進(jìn)行四則運(yùn)算。
```
h1 { width: calc(100% - 10px + 2rem); }
```

單位比例

了解單位之間的轉(zhuǎn)換比例對(duì)于精確設(shè)計(jì)至關(guān)重要：

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

css 單位比例

視口單位

vh (View height) / vw (View width)：相對(duì)于視口的高度和寬度。

.element { width: 50vw; height: 80vh; /* 根據(jù)視口尺寸計(jì)算 */ }
.full-height { height: 100vh; /* 與視口同等高度 */ }
h1 { width: 100vw; /* 與視口同寬 */ }

vmin / vmax：視口寬度或高度中較小/較大的那個(gè)尺寸。 css視口單位vmin / vmax

.box { height: 100vmin; width: 100vmin; /* 根據(jù)視口較小尺寸計(jì)算 */ }
.box { height: 100vmax; width: 100vmax; /* 根據(jù)視口較大尺寸計(jì)算 */ }

以上就是CSS尺寸單位的全面解析，希望對(duì)您的Web前端開(kāi)發(fā)之旅有所幫助。如果您想學(xué)習(xí)更多css免費(fèi)教程，可以訪問(wèn)W3Cschool的CSS尺寸教程。

CSS 前端

1 人點(diǎn)贊