css中的幾個單位 rem，視口單位和ch

rem是設計響應式網頁的神器，因為rem單位是相對html元素的font-size屬性的，因此當使用rem作為屬性單位時，當改變html元素的font-size，其他使用rem作為單位的元素也會跟著適配大小。那麼如何根據螢幕的大小製作乙個響應式的網頁呢。

這裡先說說用css**查詢，如下面所示，螢幕查詢可以指定乙個螢幕大小，當螢幕是你指定的大小時，它就會執行裡面的**，但是這種方法有乙個缺點---它並不能控制更加精確的尺寸，所以我們可以使用vm來解決這個問題。

rem

視口單位可以用來什麼，比如:

這幾個單位是相對於視口的，也就是可視區域，總共分成了100份。如果想讓乙個字型的大小在指定的區間內變化，比如可視區域的大小在980px-320px時，讓字型的大小在14-20之間變化，可以

14-(20-14)*(980-320)/(980-320)

rem

除了用這些基於視口的單位來做響應式，還可以做一些其他的事情。我們知道，如果某個值可以繼承，則百分比參照的是父元素計算的值。而當父元素不設定高度時，則是根據子元素高度來確定的。所以，如果沒有直接設定寬度和高度，100%的設定是沒有作用的。如果用視口單位，就不會有這種情況了，因為它是相對螢幕可視區的

.box

如果要實現水平垂直居中

hello css

用視口來實現網格布局

另外，當需要將按照螢幕的比例顯示時，用視口單位也是不錯的選擇ch是乙個相對於數字0的大小，比如定義了5ch的寬度，那麼就只能裝下5個0。實際上1ch=1個英文=1個數字，2ch=1個中文。

000000

如果專案需要限制輸入個數，可以使用下面**