CSS中的單位

在css中單位長度用的最多的是px、em、rem，這三個的區別是：

px是固定的畫素，一旦設定了就無法因為適應頁面大小而改變。

em和rem相對於px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用於響應式布局。

對於em和rem的區別一句話概括：em相對于父元素，rem相對於根元素。

rem中的r意思是root（根源），這也就不難理解了。

rem(瀏覽器支援還不是很理想)，他只相對html或body的字型尺寸(預設還是16px，除非你自己用font-size定義為其他)，沒有了繼承父級尺寸這個關係。

rem是根據根元素html的font-size大小來變化的。所以我們可以根據不同裝置的寬度來設定對應的html的字型大小，從而實現自適應布局。

如何根據不同裝置的寬度來設定html的字型？

在做頁面時將設計稿的寬度縮放至640px,將1rem設為設計稿中的100px,因此螢幕的寬度為（640%100）=6.4rem

(function(win) 

var rem = width / 6.4
;         docel.style.fontsize = rem + 'px'
;    }
win.addeventlistener(
'resize
', function() , 
false
);    win.addeventlistener(
'pageshow
', function(e) 
}, false
);    refreshrem();
})(window);

（1）子元素的height、top、bottom是根據其包含塊的高度進行計算的，即使父元素是absolute，也是相對于父元素，如果該高度沒有指定（根據內容自適應），那麼計算值為0；

（2）width、left、right、padding、margin是根據其包含塊的寬度進行計算的；

（3）transform:translate、translatex、translatey是根據自身元素的實際寬高計算的

vw和vh相對於視口。

視口指瀏覽器的可視區域。

vw和vh是相對於視口的寬度和高度，若不是父元素的（css百分比是相對於他最近的父元素的高度和寬度），1vh=1/100的檢視高度，1vw=1/100的檢視寬度。

vmax是相對於視口的寬度或高度中較大的那個。

vmin是相對於視口的寬度或高度中較小的那個。

pt：全程是points（磅），是乙個絕對長度單位。常用於排版印刷。

css中的單位

在css中,長度單位分為以下幾種 各單位介紹 px 不用過多介紹,精確畫素 in 寸cm 厘公尺mm 公釐pt 大約1 72寸 pc 大約1 6寸 vw 以視窗寬度為參照,1vw為視窗寬度的1 vh 視窗高度為參照,1vh為視窗高度的1 vmin 視窗的寬度和高度中較小的乙個為參照 vmax 視窗的...

CSS中的度量單位

px 相對長度單位。畫素 pixel 畫素是相對於顯示器螢幕解析度而言的。em相對長度單位。相對於當前物件內文字的字型尺寸。如當前行文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。ex相對長度單位。相對於字元 x 的高度。此高度通常為字型尺寸的一半。如當前行文字的字型尺寸未被人為設定，則相...

CSS中的em單位

css中有眾多單位，常用的px是絕對單位，em則是相對單位。在響應式和移動端的大前提下，使用em能夠更方便快捷的一次性調整web文件極其html元素的字型大小 寬度 邊距 邊框等一系列屬性，可以說在某些方面，使用em作為單位比px更靈活。em是css中的乙個相對單位，它的單位長度是根據元素的文字垂直...