瀏覽器的兼容性越來越好，移動端基本是清一色的webkit，經常會用到css的不同尺寸/長度單位，這里做個整理。
概覽
絕對單位
相對單位
運算
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也可以很方便地幫助我們控制響應尺寸，但實際的可控性可能不如前者，具體按照我們的業務需求去實踐吧！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
