文本版：
css裡最基本的長度單位是畫素px,可為什麼不是公釐厘公尺之類的單位呢?
讓我們先來回顧一下,公尺是怎麼占領地球的。在公尺出現之前,標準長度單位是五花八門,比如說我國曾經把張開的大拇指尖和中指尖之間的間距作為一尺，把人伸開雙臂的長度作為一仞。
到了西元前兩百多年，秦始皇秦大哥看不下去混亂的度量單位,拉著商鞅說要"統一哈麼，亂滴很"（陝西話），這才商量了乙個標準的度量衡器具。而國外蠻夷也採用過類似的方式，英國曾經用國王亨利一世鼻子尖到手指尖的距離作為標準。
直到2023年,法國決定把通過巴黎的子午線從赤道到北極長度的一千萬分之一作為長度單位，叫做公尺,這才確定了乙個全球範圍內統一的基本長度單位.
那麼,靈魂拷問又來了,為什麼css裡不用公釐厘公尺,而要使用pixel畫素呢?
先來看看畫素是什麼？受限於技術，計算機螢幕上的線不是連續的，它由乙個個的點組成，這些點就是螢幕上所能顯示的最小單位：裝置畫素。
而在真實世界中的線是連續的,並不存在乙個所能顯示的最小單位。從理論上來講,如果真實世界存在乙個最小單位：畫素。那麼同樣也可以用畫素來做真實世界的基本長度單位,推倒公尺大哥的統治。
不過直接讓css畫素等於裝置畫素存在兩個問題：
一，是同樣尺寸的螢幕，存在不同螢幕密度，以至於顯示效果差異巨大。例如4寸的螢幕密度大的可能有640*1136，密度小的可能只有320*568。css中設定的500*300畫素如果等同於裝置畫素，那麼肉眼看起來尺寸相差能有一倍。
二，是不同尺寸的螢幕，即使是相同的螢幕密度，顯示依舊效果差異巨大。例如布局時，750*1334解析度和640*1136解析度下，css設定兩個350*350畫素的浮動元素，在第二塊螢幕上會被擠成兩行，頁面直接亂掉。
而這兩個問題的根本其實就是解決，如何在不同螢幕上保持一致的瀏覽體驗。
第乙個問題，只需要把高密度螢幕的多個裝置畫素當做1個畫素使用，比如在4寸的640*1136解析度螢幕上，用4個點表示乙個css畫素，就得到乙個理想畫素320*568。
第二個問題稍微麻煩一點，由於螢幕廠商太多，解析度可謂是百花齊放。為了保證瀏覽體驗，需要讓元素能自適應，用畫素的話可謂是有心無力，有什麼辦法來尋找一種新的長度單位呢？
再回過頭來看看尺的概念。每個人大姆指和中指之間的間距是不一樣的，但是大家都把這段長度叫一尺。這不就是我們想要尋找的單位描述?每乙隻手相當於是一台顯示器,大姆指和中指之間的距離相當於螢幕寬度。當我們說半尺紅半尺綠的時候，無論解析度是多少，瀏覽的體驗都是一致的。
延著這個思路我們再來擴充套件一下，除了畫素外，還有哪些單位可以用做我們的長度度量單位，以方便我們的網頁布局呢? 畢竟連乙隻手乙隻腳都可以成為度量單位,還有什麼是不可能的?
比如說:文字的大小(em和rem)?比如說,父無素的比例（%）?是的,這些都是被css支援的。如果你的腦洞足夠大，這些單位又有足夠的應用場景，你完全可以為css增加新的長度單位。
比如說：用使用者的手臂長短?使用者的瞳孔大小?emmm,這些腦洞也許在未來有一天能找自己的使用場景,但是給當前css學習者帶來的困擾就是,這麼多長度單位,該選擇哪乙個?
如果你是做乙個960的定寬布局,使用畫素px就足夠了.
如果你需要做乙個自適應各種手機的布局,就該使用vw，vh。
比如想要實現這樣乙個手機上常見的頁面布局效果圖
分別為banner，圖示的寬度設定vw值，為字型的字型大小大小也設為vw值。通過對比發現即使解析度不一樣，和文字的大小都跟著不一樣了，但是，最終效果卻是等比縮放，完全實現了不同螢幕上一致的瀏覽體驗。
不過這樣的頁面雖然看起來適配很好，但是還是有繼續優化的空間。
比如螢幕寬度擴大到一定程度時，字型看起來可能會過大，內邊距也顯得有些空，反而影響了使用者的閱讀體驗。
因此如果是希望元素排版會隨著字型大小的大小改變而改變的話,em和rem則必不可少 。
這次改變了字型和內邊距的長度單位，讓它們並不會完全隨螢幕寬度變化，但卻有了更好的閱讀體驗。
好了,這次的果凍公開課到這裡要結束了,看起來我們是在講述css裡不同的長度單位如何使用,
實際上我們提出來的是乙個煎熬靈魂的拷問,到底什麼是長度單位,在虛擬世界裡應該選擇什麼樣的長度單位?希望大家能夠學會用這種角度去思考學習,而不是單純的去記憶這些單位的區別,這才是果凍想要告訴大家的道理~
怎麼樣是不是很簡單？
趕緊上手寫點**練習一下吧~
em表示什麼長度單位 CSS中強大的EM
使用css也好久了，但一直都是在使用 px 來設定web元素的相關屬性，未敢使用 em 主要原因是，對其並不什麼了解，只知道一點概念性的東西，前段時間在專案中要求使用 em 作為單位設定元素，所以從頭對 em 學習了一回。稍為有一點理解，今天特意整理了乙份博文與大家一起分享，希望對童子們有些許的幫助...
em表示什麼長度單位 什麼是水的硬度及單位表示？
水的硬度是指水中鈣離子與鎂離子的總濃度，也稱全硬度或總硬度。硬度的單位有mmol l與mg l caco3 等，其中1mmol l 50mg l caco3 除全硬度概念之外，根據水中碳酸類離子的情況，將硬度可有以下分類。碳酸鹽硬度與非碳酸鹽硬度。碳酸鹽硬度是指水中鈣 鎂的碳酸氫鹽與碳酸鹽之和 非碳...
果凍公開課第五課 五分鐘理清盒模型的前世今生
在前端程式設計師眼中，頁面其實可以被視為乙個個盒子組成的 那麼，這些盒子是如何構建起整個頁面的呢？如何理解盒模型？文字解析 在上一節裡面 我們知道了文件流和網頁中的dom都可以看作是盒子 而無論是文件流還是網頁狀態，要把一些元素比如h1 h2 h3放到另外乙個元素中 都需要他們屬於這個元素的子節點，...