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

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

反饋

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

概覽

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

絕對單位

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

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 }

相對單位

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

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

<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)前文檔對象內(nèi)文本的字體尺寸計算。
```
body { font-size: 14px }
.element { font-size: 16px; width: 2em; /* 2em === 32px */ }
```

rem (Root element meter)：根據(jù)根文檔(body/html)字體計算尺寸。 css相對尺寸rem

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; }
```

運算

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

單位比例

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

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

css 單位比例

視口單位

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

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

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

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

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

CSS 前端

1 人點贊