首先字體大小可以用font-size調整
默認字體大小是16px

    <p>p</p>
    <p style="font-size:20px">p</p>
    <p style="font-size:24px">p</p>

能在css裡調整，整體的字體大小

 body{font-size: 40px;}

以下介紹html中不同的單位設定
px:像素點(最常使用)
cm:公分
mm:釐米
pt:點
in:英吋
以上這些都是絕對的，代表不管如何他們的長度都不會變動

接下來是相對的單位，他們的能隨著不同情況改變長度
%:依照父元素的情況調整，50%就是父元素的50%
vh,vw:vh視窗高度,vw視窗寬度依照整個視窗調整%，vh:50%是整個螢幕高度的50
em:依照父元素的字體大小
rem:依照根元素的字體大小

    <div style="font-size: 50px;">
        <div style="width: 1em;background-color: cadetblue;">
            div1
        </div>
        <div style="width: 1rem;background-color: skyblue;">
            div2
        </div>
    </div>

    <div style="font-size: 50px;">
        <div style="width:50%;background-color: cadetblue;">
            div1
        </div>
        <div style="width:50vw;background-color: skyblue;">
            div2
        </div>
    </div>

可以看到同為50%，vh比%還要長一點

    <div style="font-size: 50px;background-color: burlywood;">
        <div style="width:50%;background-color: cadetblue;">
            div1
        </div>
        <div style="width:50vw;background-color: skyblue;">
            div2
        </div>
    </div>

給外層的div背景色就能發現原因了，仔細看能發現外層不是完全貼齊邊框的，因為視窗會有默認邊距，導致左右兩邊有點小空隙，所以用父容器當寬度的%才會比vw短一點

*{margin:0 ;}

給通配選擇器來個外邊界為0，div就能貼齊螢幕的左右邊框，這時候就能看到%與vw等長了

    <div style="background-color: burlywood;width: 1000PX;height: 5vh;">
        div1
    </div>
    <div style="width:80vw;height: 5vh;background-color: skyblue;">
            div2
     </div>

下面演示px與vw的比對

全螢幕

將視窗拉小後

可以看到用vw的話，整體的寬度會隨著視窗大小更改，而用px則是固定不得更改