1. 程式人生 > >css中的尺寸單位

css中的尺寸單位

絕對單位:

比例:

1           in         inches  英寸

2.54      cm       centimeter  釐米

6           pc        picas  派卡

25.4      mm      millimeter  毫米

72         pt         points  磅

96         px        pixel 畫素

101.6    q         quarter millimeter 1/4毫米

 

 

相對單位:

%          百分比

em        element meter 根據文件字型計算尺寸

rem      root element meter 根據文件(body/html)字型計算尺寸

ex        文件字元“x”的高度

ch        文件字元“0”的寬度

vh        view height 可視範圍高度

vw        view width 可視範圍寬度

vmin     view min 可視範圍的寬度和高度中較小的那個尺寸

vmax    view max 可視範圍的寬度和高度中較大的那個尺寸

 

運算:

cal()     四則運算

    eg:

    h1{width:calc(100% - 10px + 2rem);}

 

詳情:

em:相對於當前文件物件內文字的字型尺寸而言,若未指定字型大小,則繼承自上級元素,以此類推,直至body,若body未指定,則為瀏覽器預設大小.

  eg:

    body{font-size:14px;}

    h1{font-size:16px;

      width:2em;(寬為h1字型大小的2倍,也就是32px)

    }

rem:相對於根文件物件(body/html)內字型尺寸大小而言的,若未指定字型大小,則相對於瀏覽器預設字型大小.

  eg:

    body{font-size:14px;}

    h1{font-size:16px;

      width:2rem;(寬為body字型大小的2倍,也就是28px)

    }

ex:文件字元“x”的高度

ch:文件字元“0”的寬度

                圖示:

  eg:

    h1{height:3ex;width:12ch;}

 

vh-vw(可視範圍):

  相對於可視範圍的寬度和高度,vh-vw是將可視寬高分為100份中的其中一份。

  假如說可視範圍 寬為960px 高為1366px 則1vw=960px/100=9.6px   1vh=1366px/100=13.66px

vmin-vmax(可視範圍的寬高中較小或較大的一方)

  可視範圍中較小或較大的一方分為100份中的其中一份

  假如說可視範圍 width:800px height:1200px 1vmin=8px 1vmax=12px

  假如說可視範圍 width:1200px height:800px 1vmin=8px 1vmax=12px

  需要讓一個元素在螢幕上始終可見

  div{width:100vmin;

        height:100vmin;

  }

  需要讓一個元素在始終鋪滿整個可視區域

  div{

    width:100vmax;

    height:100vmax;

  }