CSS視口單位及長度單位

CSS長度單位

絕對長度單位

絕對長度單位表示爲一個固定的值，不會改變。不利於頁面渲染。

• in------英寸
• cm------ 釐米
• mm-----毫米
• pt -----點(Point)，指設備能控制顯示的最小物理單位，意指顯示器上一個個的點。從屏幕在工廠生產出的那天起，它上面設備像素點就固定不變了，和屏幕尺寸大小有關。
• pc-------派卡(Pica)，絕對長度單位

相對長度單位

其長度單位會隨着它的參考值的變化而變化。

• px-------像素。代表屏幕中每個「點」（pixel）。
• em-------元素的字體高度。每個子元素透過「倍數」乘以父元素的px值。
• %-------百分比。每個子元素透過「百分比」乘以父元素的px值。
• rem-------每個元素透過「倍數」乘以根元素的px值。
• vm------這個單位表示視口的高度。1vh等於視口高度的1%。
• vw------這個單位表示視口的寬度。1vm等於視口寬度的1%；
• vmin------- 這個單位表示視口的更小尺寸。如果視口高度小於寬度，1vmin等於視口高度1%。同樣，如果寬度小於高度，1vmin代表視口寬度1%。
• vmax------這個單位表示視口的更大尺寸。如果視口高度大於寬度，1vmax等於視口高度1%。同樣，如果寬度大於高度，1vmax代表視口寬度1%。

認識視口單位（ Viewport units )

在桌面端，視口指的是瀏覽器的可視區域；而在移動端，它涉及3個視口：Layout Viewport（佈局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。
視口單位中的“視口”，桌面端指的是瀏覽器的可視區域；移動端指的就是Viewport中的Layout Viewport。

px（像素）

px單位的名稱爲像素，是一個固定大小的單元，像素的計算是針對（電腦/手機）屏幕的，一個像素（1px）就是（電腦/手機）屏幕上的一個點，即屏幕分辨率的最小分割。由於它是固定大小的單位，單獨用它來設計的網頁，如果適應大屏幕（電腦），在小屏幕（手機）上就會很不友好，做不到自適應的效果。

        <!-- px像素 -->
        <h1>px</h1>
        <div style="font-size: 16px;">16px
            <div style="font-size: 20px;">
                16px
                <div style="font-size: 24px;">
                    16px
                    <div style="font-size: 28px;">
                        16px
                    </div>
                </div>
            </div>
        </div>

em（相對長度單位）

em單位的名稱爲相對長度單位，它是用來設置文本的字體尺寸的，相對於父級元素對象內文本的字體尺寸；如果沒有人爲設置當前對象內文本的字體尺寸，那麼它相對的是瀏覽器默認的字體尺寸（16px）。

        <!-- em字體單位 -->
        <h1>em</h1>
        <div style="font-size: 1.6em;">
            <!-- 字體大小爲16px*1.6 -->
            1.6em
            <div style="font-size: 1.6em;">
                <!-- 字體大小爲16px*1.6*1.6 -->
                1.6em
                <div style="font-size: 1.6em;">
                    <!-- 字體大小爲16px*1.6*1.6*1.6 -->
                    1.6em
                    <div style="font-size: 1.6em;">
                        <!-- 字體大小爲16px*1.6*1.6*1.6*1.6 -->
                        1.6em
                    </div>
                </div>
            </div>
        </div>

rem

rem是相對單位，爲每個元素透過“倍數”乘以根元素的px值，是相對於字體大小的html元素，也稱爲根元素。

        <!-- rem字體單位 -->
        <h1>rem</h1>
        <div style="font-size: 16px;">
            <!-- 字體大小爲16px -->
            16px
            <div style="font-size: 1.6rem;">
                <!-- 字體大小爲16px*1.6 -->
                1.6rem
            </div>
        </div>

%

%百分比是相對單位，和em類似，都是相對於父級元素。

        <!-- % -->
        <h1>%</h1>
        <div style="font-size:160%;">
                <!-- 字體大小爲16px*1.6 -->
                160%
            <div style="font-size:160%;">
                <!-- 字體大小爲16px*1.6*1.6 -->
                160%
                <div style="font-size:160%;">
                    <!-- 字體大小爲16px*1.6*1.6*1.6 -->
                    160%
                    <div style="font-size:160%;">
                        <!-- 字體大小爲16px*1.6*1.6*1.6*1.6 -->
                        160%
                    </div>
                </div>
            </div>
        </div>

vw和vh

vw和vh是視口（viewport units）單位，是根據瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，使用過程中不需要顧慮到現在那麼多不同電腦有關分辨率的自適應問題。

vw

vw是可視窗口的寬度單位，和百分比有點一樣，1vw = 可視窗口的寬度的百分之一。比如窗口寬度大小是1800px，那麼1vw = 18px。和百分比不一樣的是，vw始終相對於可視窗口的寬度，而百分比和其父元素的寬度有關。

vh

vh是可視窗口的高度,與vw一樣，如果瀏覽器的高是900px,1vh求得的值爲9px。

vmin和vmax

vmin和vmax是相對於視口的高度和寬度兩者之間的最小值或最大值。
eg：瀏覽器的高爲1100px、寬爲700px，那麼1vmin就是7px，1vmax就是11px
eg: 瀏覽器的高爲800px，寬爲1080px，那麼1vmin也是8px，1vmax也是10.8px

• vmin取寬度高度兩者更小者/100
• vmax取寬度高度兩者更大者/100

視口單位應用場景

1. 響應式佈局
   由於vw，vh的特性，能夠根據窗口大小來自動調節字體大小，這就能很輕鬆地實現響應式頁面的佈局。
2. 響應垂直居中

        /* vh和vw居中 */
        #box { 
            width: 50vw; 
            height: 50vh; 
            margin: 25vh auto; 
            background-color: pink;
        }

總結

在響應式佈局的中可以使用視口單位，相對於像素值和其他單位來說，很適用於響應式佈局，但是視口單位也存在不足，當可視窗口過小的時候，字體使用視口單位的話，可能會使字體不清等，所以在響應式佈局中，可以使用rem和視口單位一起使用。