px、em、rem、vw、vh、vmax、vmin的差別

px是絕對機關還是相對機關 ？

按照 CSS 規範的定義

，CSS 中的 px 是一個相對長度，它相對的，通常就是電腦顯示器。通常電腦顯示器的分辨率是96DPI，也就是1像素為1/96英寸

一般來說，px 就是對應裝置的實體像素，

• 實體像素，裝置能控制顯示的最小實體機關，iphone7 分辨率 750*1334 指的是實體像

  素

• 邏輯像素，虛拟的，css 使用的就是邏輯像素，視口大小 375*667 說的是邏輯像素

參考連結：https://blog.csdn.net/weixin_34388207/article/details/91364300

參考連結：https://blog.csdn.net/qq_33834489/article/details/79247119

各距離機關的差別

• px：相對長度機關，是相對于顯示器的螢幕分辨率而言的。

  優點：比較穩定和精确；

  缺點：如果使用者對浏覽器進行縮放，這時會使用我們的Web頁面布局被打破；

• em：相對機關，基準點為父節點字型的大小.
• rem：相對機關，可了解為”root em”, 相對根節點html的字型大小來計算.

  CSS3新加屬性，chrome/firefox/IE9+支援)

  另外需注意chrome強制最小字型為12号，即使設定成 10px, 最終都會顯示成 12px，當把html的font-size設定成10px,子節點rem的計算還是以12px為基準，是以網上很多文章提到的将html的font-size設為10友善計算不是那麼可取

• vw：viewpoint width，視窗寬度，1vw等于浏覽器視窗寬度的1%。
• vh：viewpoint height，視窗高度，1vh等于浏覽器視窗高度的1%。
• vmin：vw和vh中較小的那個。
• vmax：vw和vh中較大的那個。
• grid布局中的fr:一個自适應機關，用于在一系列長度值中配置設定剩餘空間，剩下的空間是按照各自的數字按比例配置設定。

vw, vh, vmin, vmax支援情況：

IE9+局部支援，chrome/firefox/safari/opera支援，iOS safari 8+支援，Android browser4.4+支援，chrome for android39支援

grid布局中的fr支援情況

ie11及其以上； Chrome40及其以上；

rem的優勢

由于現在螢幕分辨率千差萬别，我們隻要将rem與螢幕分辨率(px)關聯起來，就可以實作頁面的整體縮放（适應各種尺寸的螢幕）

rem的缺點

一方面，使用rem機關，有時候在小螢幕上,可能會使得字型模糊（放大/縮小的原因）

另一方面，使用rem來定義圖檔、視訊尺寸時，有時候會使得圖檔視訊在pc上正常顯示，但在mobile上感覺過小，影響整體效果； 或在mobile上正常顯示，到pc上時，圖檔變形，圖檔模糊等；