px,em,rem,vw單位在網頁和移動端的應用

時間 2020-10-01

標籤 rem 單位網頁移動端的應用欄目 CSS 简体版

原文原文鏈接

px：css

是網頁設計中最經常使用的單位，然而1px究竟是多大長，恐怕沒有人能回答上來html

它用來表示屏幕設備物理上能顯示的最小的一個點，這個點不是固定寬度的，不一樣設備上點的長度、比例有可能會不一樣。瀏覽器

假設：你如今用的顯示器上1px寬=1毫米，但我用的顯示器1px寬=兩毫米，那麼你定義一個div寬度爲100px，你顯示器上看這個div是10釐米，我顯示器上看是20釐米。另一個px點的長度不必定是1:1的正方形，有的設備上長度比是不同的。ide

更多px信息點此博客。 px的兼容性：須要注意的是谷歌瀏覽器最小能夠識別12px大小的字體，更多解決方案能夠參看文檔工具

em:字體

相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)spa

任意瀏覽器的默認字體高都是16px。設計

全部未經調整的瀏覽器都符合: 1em=16px。此時1.25em=16px*1.25=20px;orm

若是人爲的把body裏面定義font-size:12px; 此刻1em=12px，1.25em=12px*1.25=15px;htm

若是咱們把body設置font-size:62.5%，即16px*62.5%=10px,此時1em=10px,1.25em=12.5px；

這樣更好的有利於咱們計算，將原來的px數值除以10，而後換上em單位便可，em能夠兼容多瀏覽器

em特徵：一、em值並不固定；二、em會繼承父級元素的字體大小。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>font</title>
    <style type="text/css">
    body{ font-size: 16px;}
    div{ font-size: 1.25em;}
    div p{ font-size: 1.25em}
    </style></head><body>
    <div>
        這裏面字體20px;        <p>這裏面的字體大小25px</p>
    </div>        </body></html>

這裏能夠看出em的繼承特性，一樣設置1.25em，div裏的字體按照16px*1.25=20px; p裏面的字體按照20px*1.25=25px;單位一致，顯示不一樣大小；

這裏是個em的換算工具

rem：

rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小，rem的兼容性和em同樣

VW:

vw是可視區寬度單位。1vw等於可視區寬度的百分之一。

100vw=相對於視窗寬度

100vh=相對於視窗高度

vm:相對於視窗的寬度或高度，取決於哪一個更小； vmin:vw和vh中較小的那個；vmax:vw和vh中較大的那個

vw單位跟百分比很類似，不一樣的是vw的值對全部的元素都同樣，與他們父元素或父元素的寬度無關。有點像rem單位那樣老是相對於根元素。

vw的兼容性現代瀏覽器都支持，但古董瀏覽器仍是說下