px：像素相對長度機關，相對于顯示器螢幕分辨率(推薦使用)

em：相對長度機關基準點為父節點字型的大小，如果自身定義了font-size按自身來計算（浏覽器預設字型是16px），整個頁面内1em不是一個固定的值。

rem：相對機關可了解為”root em”, 相對根節點html的字型大小來計算，CSS3新加屬性，chrome/firefox/IE9+支援。

vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。

vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。

vmin：vw和vh中較小的那個。

vmax：vw和vh中較大的那個。

%:百分比

in:寸

cm:厘米

mm:毫米

pt:point，大約1/72寸

pc:pica，大約6pt，1/6寸

在css機關中，可以分為長度機關、絕對機關，如下表所訓示

CSS機關
相對長度機關	em、ex、ch、rem、vw、vh、vmin、vmax、%
絕對長度機關	cm、mm、in、px、pt、pc

1.px

px，表示像素，所謂像素就是呈現在我們顯示器上的一個個小點，每個像素點都是大小等同的，是以像素為計量機關被分在了絕對長度機關中。有些人會把px認為是相對長度，原因在于在移動端中存在裝置像素比，px實際顯示的大小是不确定的。這裡之是以認為px為絕對機關，在于px的大小和元素的其他屬性無關。

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
 </style>

 <body>
    <div class="box"></div>
 </body>

2.em

em是相對長度機關。相對于目前對象内文本的字型尺寸。如目前對行内文本的字型尺寸未被人為設定，則相對于浏覽器的預設字型尺寸（1em = 16px）。為了簡化 font-size 的換算，我們需要在css中的 body 選擇器中聲明font-size= 62.5%，這就使 em 值變為 16px*62.5% = 10px。這樣 12px = 1.2em, 10px = 1em, 也就是說隻需要将你的原來的px 數值除以 10，然後換上 em作為機關就行了。

特點：

em 的值并不是固定的
em 會繼承父級元素的字型大小
em 是相對長度機關。相對于目前對象内文本的字型尺寸。如目前對行内文本的字型尺寸未被人為設定，則相對于浏覽器的預設字型尺寸
任意浏覽器的預設字型高都是 16px

舉個例子:

<div class="big">
    我是14px=1.4em<div class="small">我是12px=1.2em</div>
</div>

<style>
    html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
    .big{font-size: 1.4em}
    .small{font-size: 1.2em}
</style>

這時候.big元素的font-size為14px，而.small元素的font-size為12px

3.rem

rem參考物是相對于根元素，我們在使用時可以在根元素設定一個參考值即可，相對于em使用，減少很大運算工作量，例：html大小為10px，12rem就是120px

這樣頁面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得視覺、使用、書寫都得到了極大的幫助

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

在根标簽font-size為 16px 下，1rem=16px ,80px=5rem

<style>
        html {
            font-size: 16px;
        }
        .box1 {
            width: 5rem;
            height: 10rem;
            background-color: #ccc;
        }

        .box2 {
            width: 80px;
            height: 160px;
            background-color: #333;
        }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

px、em、rem、%、vw、vh、vm、rpx 差別，最全CSS機關，不懂找我

rem機關可謂集相對大小和絕對大小的優點于一身
和em不同的是rem總是相對于根元素，而不像em一樣使用級聯的方式來計算尺寸

4.%

% 是相對于父元素的大小設定的比率，position:absolute;的元素是相對于已經定位的父元素，position：fixed；的元素是相對可視視窗

5.vm

vm相對于視口的寬度。視口被均分為100機關

h1 {
    font-size: 8vw;
}

再舉個例子：浏覽器寬度1200px, 1 vw = 1200px/100 = 12 px

這裡的視窗分成幾種情況：

在桌面端，指的是浏覽器的可視區域
移動端指的就是布局視口

像vw、vh，比較容易混淆的一個機關是%，不過百分比寬泛的講是相對于父元素：

對于普通定位元素就是我們了解的父元素
對于position: absolute;的元素是相對于已定位的父元素
對于position: fixed;的元素是相對于 ViewPort（可視視窗）

6.vh

h1 {
    font-size: 8vh;
}

再舉個例子：浏覽器高度900px, 1 vh = 900px/100 = 9 px

總結：

1.vw：1vw等于視口寬度的1%。
  2.vh：1vh等于視口高度的1%。

但是使用起來相容性很差，還是不推薦使用，目前用的很舒服的還是px和rem，

要麼用vw,要麼用vh, 兩者不要混着用，會出問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box1 {
            width: 10vw;
            height: 10vw;
            background-color: #ccc;
            margin: 5vw auto;
        }

        .box2 {
            width: 10vh;
            height: 10vh;
            background-color: pink;
            margin: 5vh auto;
        }
          
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

</body>
</html>

vw适配效果

vh适配效果

7、rpx

rpx是微信小程式獨有的、解決螢幕自适應的尺寸機關
可以根據螢幕寬度進行自适應，不論大小螢幕，規定螢幕寬為 750rpx
通過 rpx 設定元素和字型的大小，小程式在不同尺寸的螢幕下，可以實作自動适配

rpx 和 px之間的差別：

在普通網頁開發中，最常用的像素機關是px
在小程式開發中，推薦使用 rpx 這種響應式的像素機關進行開發

設計師在出設計稿的時候，出的都是二倍圖，也就是說如果在這個設計稿上有一個寬高為 200px 的盒子，那麼它最終畫到頁面上實際上是一個寬高為 100px 的盒子，那麼再換算成 rpx 需要乘以 2 ，就又變成了 200rpx ，跟設計稿上的數字是一樣的，是以我們可以保持數字不變，直接将機關 px 替換成 rpx

em與px換算

任意浏覽器的預設字型高度16px（16像素）。所有未經調整的浏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說隻需要将你的原來的px數值除以10，然後換上em作為機關就行了。

移動端螢幕為750px

那麼： 100vw = 750px

是以1vw就等于：1vw =750px/100vw = 7.5px

注意現在1vw等于 7.5px，而我們的1rem是16px (預設情況下根元素字型大小為16px)

現在進行計算：1rem = 16px/7.5px = 2.133vw

相反：1vw = 7.5px/16px = 0.469rem

上面的計算公式計算同樣也可以逆向思考下：同理，移動端螢幕大小為750px

我們計算1px等于多少vw: 1px = 100/750 = 0.1333vw

顯示1px=0.1333vw

現在進行計算：1rem= 0.1333 * 16 = 2.133vw

常見問題：

1、假如使用em來設定文字大小要注意什麼？

注意父元素的字型大小，因為em是根據父元素的大小來設定的。

比如同樣是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px（特别是在多重div嵌套裡面更要注意）

2、pc pt ch一般用在什麼場景？

這些我們網頁設計基本上用不到，在排版上會有用處

3、如何使 1rem=10px？

在設定HTML{font-size：62.5%；}即可

4、如果父元素沒有指定高度，那麼子元素的百分比的高度是多少？

會按照子元素的實際高度，設定百分比則沒有效果

總結

「px」

絕對長度機關，來描述一個元素的寬高以及定位資訊

「em」：

相對機關，基準點為父節點字型的大小，如果自身定義了font-size按自身來計算（浏覽器預設16px）em作為字型機關，相對于父元素字型大小；em作為行高機關時，相對于自身字型大小，整個頁面内 1em 不是一個固定的值。

「rem」：

相對機關，可了解為”root em”，相對根節點html的字型大小來計算，CSS3新加屬性，rem作用于非根元素時，相對于根元素字型大小；rem作用于根元素字型大小時，相對于其出初始字型大小。rem布局的本質是等比縮放，一般是基于寬度，試想一下如果UE圖能夠等比縮放，那該多麼美好啊

「vh、vw」：

viewpoint width / viewpoint height，vw 相對于視窗的寬度，vh 相對于視窗的高度，1vw等于視窗寬度的1%

主要用于頁面視口大小布局，在頁面布局上更加友善簡單

對于視口的寬度或高度中較小的那個,使用方法和vh\vm類似

「百分比」：

1% 對不同屬性有不同的含義。 font-size: 200% 和font-size: 2em 一樣，表示字型大小是預設（繼承自父親）字型大小的2倍。 line-height: 200% 表示行高是自己字型大小的 2 倍。 width: 100%表示自己 content 的寬度等于父親 content 寬度的1倍。

px、em、rem、%、vw、vh、vm、rpx 差別，最全CSS機關，不懂找我