瀏覽器的相容性越來越好,移動端基本是清一色的webkit,經常會用到css的不同尺寸/長度單位,這裡做個整理。
概覽
絕對單位
- px: Pixel 畫素
- pt: Points 磅
- pc: Picas 派卡
- in: Inches 英寸
- mm: Millimeter 毫米
- cm: Centimeter 釐米
- q: Quarter millimeters 1/4毫米
相對單位
- %: 百分比
- em: Element meter 根據文件字型計算尺寸
- rem: Root element meter 根據根文件( body/html )字型計算尺寸
- ex: 文件字元“x”的高度
- ch: 文件數字“0”的的寬度
- vh: View height 可視範圍高度
- vw: View width 可視範圍寬度
- vmin: View min 可視範圍的寬度或高度中較小的那個尺寸
- vmax: View max 可視範圍的寬度或高度中較大的那個尺寸
運算
- calc: 四則運算
例項:
h1 {
width: calc(100% - 10px + 2rem)
}複製程式碼
單位比例
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
詳細
絕對單位
px - Pixel 畫素
畫素 px 相對於裝置顯示器螢幕解析度而言。
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 }複製程式碼
相對單位
% 百分比
相對於父元素寬度
<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 根據文件計算尺寸
相對於當前文件物件內文字的字型尺寸而言,若未指定字型大小則繼承自上級元素,以此類推,直至 body,若 body 未指定則為瀏覽器預設大小。
<body>
<div class="element"></div>
</body>
<style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
width: 2em;
/* 2em === 32px */
}
</style>複製程式碼
rem Root element meter 根據根文件( body/html )字型計算尺寸
相對於根文件物件( body/html )內文字的字型尺寸而言,若未指定字型大小則繼承為瀏覽器預設字型大小。
<body>
<div class="element"></div>
</body>
<style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
width: 2rem;
/* 2rem === 28px */
}
</style>複製程式碼
ex 文件字元“x”的高度
相對於字元“x”的高度,通常為字型高度的一半,若未指定字型尺寸,則相對於瀏覽器的預設字型尺寸。
至於為啥是x,我TM也不知道。
<body>
<div class="x"></div>
</body>
<style>
.x {
height: 1ex;
overflow: hidden;
background: #aaa;
}
</style>複製程式碼
ch 文件數字“0”的的寬度
同上,相對於數字“0”的寬度。
<body>
<h1>定義一個寬度正好能裝下10個0的容器:</h1>
<div class="0">0000000000</div>
</body>
<style>
.0 {
width: 10ch;
overflow: hidden;
background: #ccc;
}
</style>複製程式碼
一張圖解釋:
vh View height / vw View Width - 可視範圍
相對於可視範圍的高度和寬度,可視範圍被均分為 100 單位的 vh/vw;可視範圍是指螢幕可見範圍,不是父元素的,百分比是相對於包含它的最近的父元素的高度和寬度。
假設裝置可視範圍為高度 900px,寬度 750px,則,1 vh = 900px/100 = 9px,1vw = 750px/100 = 7.5px
。
<body>
<h1>article title</h1>
<div class="element"></div>
<div class="full-height"></div>
</body>
<style>
.element {
width: 50vw;
height: 80vh;
/* 如果螢幕高度為1000px,則該元素高度為800px,vw 同理 */
}
.full-height {
height: 100vh;
/* 輕易實現了與螢幕同等高度的元素 */
}
h1 {
width: 100vw;
/* 設定一個和螢幕同寬的標題,標題的字型大小就會自動根據瀏覽器的寬度進行縮放,以達到字型和viewport大小同步的效果。 */
}
</style>複製程式碼
vmin / vmax 可視範圍的寬度或高度中較小/較大的那個尺寸
假設瀏覽器的寬度設定為 1200px,高度設定為 800px, 則1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px
。
如果寬度設定為 600px,高度設定為 1080px, 則1vmin = 6px, 1vmax = 10.8px
。
假設需要讓一個元素始終在螢幕上可見:
.box {
height: 100vmin;
width: 100vmin;
}複製程式碼
假設需要讓這個元素始終鋪滿整個視口的可見區域:
.box {
height: 100vmax;
width: 100vmax;
}複製程式碼
總結
em、rem 是實際生產中我們最常用到的單位,可以使用其配合媒體查詢改變 body 字型大小來實現響應式的設計,vh、vw、vmin、vmax也可以很方便地幫助我們控制響應尺寸,但實際的可控性可能不如前者,具體按照我們的業務需求去實踐吧!
原文地址:surmon.me/article/58
完