1.畫素
1、在前端開發中視口的水平方向和垂直方向都是由很多個小方格組成的，乙個小方格就是乙個畫素，例如div的尺寸是100*100，那麼水平方向就占用100個小方格，垂直方向也占用100個小方格
2、畫素的特點
畫素的大小不會隨著視口的變化而變化，畫素是乙個固定的單位（絕對單位）
2.百分比
1、百分比是乙個動態單位，永遠都是以當前元素的父元素作為參考進行計算
例如：父元素的寬高都是200px，設定子元素的寬高都是50%，那麼子元素的寬高就是100px
2、百分比的特點
2.1、子元素寬高是參考父元素寬高進行計算的
2.2、子元素的padding是參考父元素的寬度進行計算的
2.3、子元素的margin是參考父元素的寬度進行計算的
2.4、border的寬度不可以用百分比來設定
3.em
1.em是乙個動態單位，是乙個相對於元素字型大小的單位
例如：font-size:12px;那麼1em就等於12px
2.em特點
2.1當前元素設定了字型大小，那麼就相對於當前元素的字型大小
2.2當前元素沒有設定字型大小，那麼就相對於當前元素第乙個設定了字型大小的祖先元素的字型大小
2.3如果當前元素和所有祖先元素都沒有設定字型大小，那麼就相對於瀏覽器預設的字型大小
結論：em是乙個動態的單位，會隨著參考元素字型大小的變化而變化（相對單位）
4.rem
1.rem（root em）是乙個動態單位，是相對於html（根元素）的字型大小進行設定的
2.rem特點
2.1如果html元素設定了字型大小，那麼就相對於html元素的字型大小來進行設定
2.2如果html元素沒有設定字型大小，那麼就相對於瀏覽器預設的字型大小進行設定
結論：em是乙個動態的單位，會隨著參考元素字型大小的變化而變化（相對單位）
5.vw和vh
1.什麼是vw(viewport width)和vh(viewport height)?
1.1vw和vh是前端開發中的乙個相對單位，是乙個相對於網頁視口的單位
1.2系統會將視口的寬度和高度分為100份，1vw就占用視口寬度的百分之一，1vh就占用視口高度的百分之一
1.3vw和vh不同的是，百分比永遠都是以父元素作為參考，而vw和vh永遠都是以視口作為參考
結論：vw和vh是乙個動態單位，會隨著視口大小的變化而變化（相對單位）
6.vmin和vmax
什麼是vmin和vmax？
vmin：vw和vh中較小的那個
vmax：vw和vh中較大的那個
使用場景：保證移動開發中螢幕旋轉之後尺寸不變
前端開發中的長度單位詳解
在前端開發中，會遇到各種不同型別的長度單位，比如px,em,rem等。而整體的長度單位分為兩大類 相對長度和絕對長度。絕對長度單位是乙個固定的值，它反應乙個真實的物理尺寸。絕對長度單位視輸出介質而定，不依賴於環境 顯示器 解析度 作業系統等 相對長度都有乙個基準 其中，px,em和rem用的較多。需...
前端開發中的CSS的長度單位em px ex
px 畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。em 是相對長度單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。ex 相對長度單位。相對於字元 x 的高度。此高度通常為字型尺寸的一半。如當前對行內文字的字型尺寸...
前端介面開發大小單位 px rem em的思考記錄
前端介面開發表示大小的單位有 px rem em。這三種有什麼區別呢？px指畫素值，固定大小，較好理解。rem em的區別呢？em是針對body中的font size的倍數，rem是針對html的倍數。1 em em是針對body中font size的倍數，font size預設是24px 例 bo...