html5純css字型大小自適應設定

2021-09-28 20:26:58 字數 751 閱讀 1220

字型可以設定大小使用css font-size來實現,有時需要對字型大小根據瀏覽器解析度來判斷後自適應大小。

在css 2.0中字型大小自適應是難實現的,一般使用js來實現,這裡就不必說了。

現在字型大小自適應樣式常常使用在ie10、谷歌瀏覽器、較新手機、平板平台上(安卓、ios),可以使用css3.0來實現。但是依然是使用font-size字型大小樣式來設定,只不過值在css3版本中新增了自適應百分比大小值。

css3提供了一些與當前viewpoint相關的元素,vw,vh,vim等。

「viewpoint」 = window size

15vw = 15% 設定width(可以理解為寬度單位)

15vh = 15% 設定height(可以理解高度單位)

此css 3單位相容性:chrome 20+/ safari 6+/ ie 10+ / ff 19+ / ios 6+

<

!doctype

html

>

"utf-8"

>

文字大小自適應例項<

/title>

#fontset

<

/style>

<

/head>

"fontset"

>

文字字型大小為5vw

<

/div>

<

/body>

<

/html>

字型大小自適應純css解決方案

css3提供了一些與當前viewpoint相關的元素,vw,vh,vim等。viewpoint window sizevw 1 of viewport width 1vh 1 of viewport height 1vmin 1vw or 1vh,最小 1vmax 1vw or 1vh,最大 例如 ...

字型大小自適應純css解決方案

css3提供了一些與當前viewpoint相關的元素,vw,vh,vim等。viewpoint window sizevw 1 of viewport width 1vh 1 of viewport height 1vmin 1vw or 1vh,最小 1vmax 1vw or 1vh,最大 相容性...

字型大小自適應純css解決方案

css3提供了一些與當前viewpoint相關的元素,vw,vh,vim等。viewpoint window sizevw 1 of viewport width 1vh 1 of viewport height 1vmin 1vw or 1vh,最小 1vmax 1vw or 1vh,最大 相容性...