響應式佈局中的CSS相對量

時間 2019-12-17

標籤響應佈局 css 相對欄目 CSS 简体版

原文原文鏈接

一個響應式佈局，要可以根據設備屏幕尺寸的改變，動態的調整頁面內容，展示不一樣的設計風格。
在進行響應式的 CSS 代碼編寫過程當中，常常會用到一些相對尺寸，以達到相對定位的目的。例如，常見的響應式佈局中須要用到「自適應的圖片」、「流動佈局」等技術。css

體如今 CSS 代碼編寫上，就須要前端開發人員精準掌握特定屬性的相對量表示方法。
然而，其中一些相對量的計算方法很容易混淆。html

本文在完整梳理所有 CSS 屬性基礎上，將其中的「相對單位、百分比相對量、數字相對量」清晰的羅列出來。
進而爲後續的響應式設計編碼提供依據。前端

值得注意的是，百分比相對量十分容易混淆，不一樣 CSS 屬性的百分比值的計算方法不一樣，
有的相對於父元素、有的相對於包圍盒、有的相對於其餘屬性、有的相對於寬度、有的相對於高度，細節千差萬別。css3

CSS 屬性的瀏覽器兼容性，請查詢 Can I Use。
已經被標準廢棄（Deprecated）的屬性，沒有列出。
歡迎您與我一同完善這個清單，提供數據的讀者姓名將在文中標註。
（經過評論方式提供遺漏的相對量）web

1、相對單位和量

視口單位 (viewport)

vh：視口高度的 1/100
vw：視口寬度的 1/100
vmin：視口寬度、高度中最小值的 1/100
vmax：視口寬度、高度中最大值的 1/100segmentfault

字體單位

em：元素 font-size 的大小，若是在 font-size 屬性使用 em，則 em 表示該元素繼承下來的 font-size 大小。
rem：根元素 <html> 的font-size 大小。若是 rem 用在根元素的 font-size 上，則 1 rem 表示根元素 font-size 的初始值。瀏覽器

<position>：偏移量的百分比是相對於元素盒的寬度、高度。水平方向（x軸）的百分比相對於元素盒的寬度。豎直方向（y軸）的百分比相對於元素盒的高度。函數

函數

rgb/rgba：RGB 三個通道，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。Alpha 通道，a = 0表示透明，a = 1 表示不透明。佈局

hsl/hsla：s 通道表示飽和度，取值範圍是 0 - 100%。l 通道表示亮度，取值範圍是 0 - 100%。Alpha 通道，a = 0表示透明，a = 1 表示不透明。post

2、數字相對量

小數相對量指的是 CSS 規範中的<number>量（查看 MDN 規範）。
整數相對量指的是 CSS 規範中的<integer>量（查看 MDN 規範）。

小數相對量

font-size-adjust(CSS3)：設置小寫x字母的高度。計算方法爲指定的 數字值 乘以 font-size。
zoom：數字值指的是縮放引子本身。

整數相對量

border-image-width：指的是元素 border-width 計算值的倍數。

3、百分比相對量

百分比相對量指的是 CSS 規範中的<percentage>量（查看 MDN 規範）。

許多長度屬性使用百分比，例如

width、height
max-height/min-height、max-width/min-width
margin
padding
font-size
border-width
text-shadow
background-size
background-position
top、bottom、left、right
line-height
text-indent
vertical-align

注意：只有計算後的屬性會被繼承。當一個父屬性使用百分比時，在繼承屬性（子屬性）上會計算父屬性的經過百分比計算後的實際值，不會將百分比繼承下來。

「定位」屬性

top/bottom：在top屬性中，使用 % ，表示相對於_包含塊_的高度百分比。能夠爲負值。
right/left：表示相對於_包含塊_的寬度百分比。能夠爲負值。

「彈性盒模型」屬性

查看彈性盒模型。

flex-basis：百分比指的是 flex 容器的內部主尺寸（inner main size）的百分比。
即，a percentage of the parent flex container main size property

min-height/min-width：初始值爲0。

「尺寸」屬性

width/max-width/min-width：指的是_包含塊_的寬度百分比。若是包含塊的寬度依賴本元素寬度，則佈局結果未定義。

height/max-height/min-height：指的是元素生成盒（generated box）的_包含塊_（containing block）的高度。若是包含塊的高度沒有顯式指定（依賴於內容高度），而且本元素沒有絕對定位，則 height 值計算爲 auto，max-height 值計算爲 none，min-height 值計算爲 0。根元素的百分比高度相對於根元素的初始包含塊。

「外邊距」屬性

margin：指的是_包含塊_的寬度百分比。能夠是負值。
margin-top/margin-bottom：指的是_包含塊_的寬度百分比。
margin-left/margin-right：指的是_最近包含塊_的寬度百分比。

「內邊距」屬性

padding：指的是_包含塊_的寬度百分比。
padding-top/padding-bottom：指的也是_包含塊_的寬度百分比。
padding-left/padding-right：指的也是包含塊的寬度百分比。

「邊框」屬性

border-image：縮寫形式，其中的 border-image-slice、border-image-width 有百分比設置。border-image 的詳細用法，請參考這裏。
border-image-slice：能夠制定最多4個值，其中的某個值的百分比指的是相對於圖片尺寸的百分比。
border-image-width：指的是邊界圖像區域(border image area)的尺寸百分比。將要繪製邊界圖像的整個區域稱爲邊界圖像區域。border-image-width屬性用於縮放 border-image-slice。

border-radius：指的是圓形半徑或橢圓形的長半軸、短半軸。水平方向的軸的百分比值對應邊界盒（border box）的寬度。垂直方向的軸的百分比值對應邊界盒（border box）的高度。
border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius：圓角水平軸的值對應邊界盒的寬度。圓角垂直軸的值對應邊界盒的高度。

「背景」屬性

background：縮寫中的屬性值分別對應各自的百分比意義。如 background-position、background-size。
background-position：百分比指的是背景定位區域的尺寸減去背景圖片的尺寸。這裏的尺寸指的是，水平偏移的寬度或者垂直偏移的高度。
background-size：百分比值相對於背景定位區域。background-size用於肯定背景圖片的大小。