之前做**的時候有聽前同事提起過，移動端的畫素單位是vw,今天剛好想起這個問題。
vw就是用螢幕寬度做適配，移動端千奇百怪的尺寸，用寬度適配能避免好多問題。
眾所周知css技術我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們在新問題出現的時候變得很不利。
隨著web繼續不斷地發展，對於新技術新解決方案的要求也會不斷增長。因此，作為網頁設計師和前端開發人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰不殆。
這就意味著有那麼些個特別的貨，雖然平常都不怎麼會用上，但是一旦某個地方需要它們了，他們就真的是特麼得合適不過來了呢。
今兒，我就準備向大夥兒介紹一些你們之前可能很少見過css傢伙們。他們每個都是度量的單位，類似pixel 和 em 這樣的，但是很有可能你之前從來就沒聽過這些傢伙們！就讓我們一起來交個朋友吧~
rem
我們首先介紹下和我們熟悉的很相似的貨。em 被定義為相對於當前物件內文字的字型大小。炒個栗子，如果你給body小哥設定了font-size字型大小，那麼body小哥的任何子元素的1em就是等於body設定的font-size。
class="test">test
body>
body
div
但是，如果你用em一層一層級聯得定義巢狀元素的字型大小又會花生什麼事情呢？在下面這一小段**裡我們應用了和上面一樣一樣的css，每乙個div都從它上一級父元素繼承了字型大小，並且逐漸得增加。
test
test
test
div>
div>
div>
body>
雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對度量單位就好。這時候嘛，我們就可以使用 rem 了。 『r』是「root」的縮寫，意思就是1rem等於根元素的字型大小；大部分情況下，根元素就是元素了。
html
div
適用於網格布局
rems 不僅僅只是在設定字型大小上很方便。再炒個栗子，你可以用基於html根元素字型大小的rem作為整個網格布局或者ui庫的大小單位，然後在其他特定的地方用em單位。這樣將會給你帶來更多的字型大小和伸縮的可控性，
.containervh and vw
響應式web設計離不開百分比。但是，css百分比並不是所有的問題的最佳解決方案。css的寬度是相對於包含它的最近的父元素的寬度的。但是如果你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，那該腫麼辦？ 這就是 vh 和 vw 單位為我們提供的。
1vh 等於1/100的視口高度。栗子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。同理，如果視口寬度未750， 1vw = 750px/100 = 7.5 px。
可以想象到的，他們有很多很多的用途。比如，我們用很簡單的方法只用一行css**就實現同螢幕等高的框。
.slide
例項vmin and vmax
vh和 vw 依據於視口的高度和寬度，相對的，vmin 和 vmax則關於視口高度和寬度兩者的最小或者最大值。比如，瀏覽器的寬度設定為1100px，高度設定為700px， 1vmin = 1px， 1vmax = 11px。如果寬度設定為800px,高度設定為1080px, 1vmin就等於8px, 1vmax則未10.8px。
那麼問題來了，我們應該在什麼場景下使用這兩個單位呢？
假設有乙個元素，你需要讓它始終在螢幕上可見。只要對其高度和寬度使用vmin單位，並賦予其低於100的值就可以做到了。再來個栗子，可以這樣定義乙個至少有兩個邊觸控到螢幕的方形：
.box
.box
ex and ch
ex 和 ch 單位，類似於 em 和 rem, 依賴於當前的字型和字型大小。 但是，不同的是，這兩貨是基於字型的度量單位，依賴於設定的字型。
ch 單位通常被定義為數字0的寬度。你可以在eric meyers的部落格裡找到關於它的一些有意思的討論，例如將乙個等寬字型的字母」n」的寬度設定為40ch，那麼在另一種型別的字型裡它卻可以包含40個字母。這個單位的傳統用途主要是盲文的排版，但是除此之外，肯定還有可以應用他的地方。
ex 定義為當前字型的小寫x字母的高度或者 1/2 的 1em。 很多時候，它是字型的中間標誌。
3 x-height; the height of the lower case x
這些單位有很多用途，大部分用於版式的微調。比方說，sup 元素（上角文字標），可以通過position:relative;bottom: 1ex;實現 。類似的方法，你可以實現乙個下角文字標。瀏覽器預設的方式是利用
上標和下標特定垂直對齊規則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：
sup
sub
持續關注不斷發展壯大的css技術無疑是很重要的，這樣你才能掌握你所持有的工具的全部技能。說不定將來你遇到的某個特殊的問題就需要使用這些複雜的單位來解決。花點時間去閱讀新的技術規範，註冊訂閱一些不錯的**或者資源，類似 cssweekly這樣的。 當然不要忘記現在就去註冊像tuts +這樣的**來獲取每週的更新，課程，免費教程還有資源！
擴充套件閱讀
more css unit goodness.
taking the 「erm..」 out of ems
taking ems even further
caniuse viewport units
移動端vw單位適配
一.專案中配置postcssrc.js，同時安裝好對應的外掛程式 module.exports 解決 import引入路徑問題 postcss url 該外掛程式主要用來處理檔案，比如檔案 字型檔案等引用路徑的處理.autoprefixer 自動處理瀏覽器字首，不用在乙個個加字首啦 postcss ...
移動端適配rem單位
1.rem單位 描述 rem是css中的乙個尺寸單位，和px，em等單位一樣，都是用來設定大小的。rem代表的含義為 是html的字型大小的多少倍 語法 document.documentelement.style.fontsize document.documentelement.clientwi...
移動端適配（rem單位定義方法）
注 移動端必須寫 1.首先設定html 頁面寬度為html字型大小的rem 即25rem 推薦html字型大小設定為12px到25px之間，不能設定大於25px,w3c對網頁最小字型並沒有硬性的規定。只是我們在設計網頁的時候因為考慮到可閱讀性，最小一般為12px大小，如果設定大於25px，可能最終的...