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

2021-07-04 15:38:16 字數 3536 閱讀 9119

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, 最大

相容性:chrome 20+/ safari 6+/ ie 10+ / ff 19+ / ios 6+

(已經用js修正重繪bug)

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>demo

title

>

<

style

type

="text/css"

>

#box

style

>

head

>

<

body

>

<

div

id="box"

>

我是靖鳴君 我是靖鳴君 我是靖鳴君

div>

body

>

html

>

但是該方案存在乙個bug,上面的**,當瀏覽器視窗變化的時候,box中的文字並沒有按照應有的比例變化,但是css3標準中是這麼說的:

when the height or width of the viewport is changed, they are scaled accordingly.

像這樣的問題,我之前也遇到過,比如以下**:(小插曲,可跳過)

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>css3 demo

title

>

<

style

type

="text/css"

>

body, div

.wrap

.box

style

>

head

>

<

body

>

<

div

class

="wrap"

><

div

class

="box"

>

div>

div>

body

>

html

>

box的寬度設定為900px,wrap設定為100%;縮小瀏覽器視窗,當寬度小於900時會出現滾動條,向右滾動,會發現藍色部分並不是100%,這個問題大家可以去思考下。

回到上面的問題,font-size:4vw,應該會使得字型的大小變化,可是他沒有,和標準說的不一樣,所以可以認為是乙個bug。

window.onresize = function

()

z-index可以對應的元素被重繪(repaint)。

延伸一點點關於重繪(repaint)和回流(reflow)的知識:

1. 新增、刪除元素(回流+重繪)

2. 隱藏元素,display:none(回流+重繪),visibility:hidden(只重繪,不回流)

3. 移動元素,比如改變top,left(jquery的animate方法就是,改變top,left不一定會影響回流),或者移動元素到另外1個父元素中。(重繪+回流)

4. 對style的操作(對不同的屬性操作,影響不一樣)

5. 還有一種是使用者的操作,比如改變瀏覽器大小,改變瀏覽器的字型大小等(回流+重繪)

讓我們看看下面的**是如何影響回流和重繪的:

var s =document.body.style;

s.padding = "

2px"; //

回流+重繪

s.border = "

1px solid red

"; //

再一次 回流+重繪

s.color = "

blue

"; //

再一次重繪

s.backgroundcolor = "

#ccc

"; //

再一次 重繪

s.fontsize = "

14px

"; //

再一次 回流+重繪

//新增node,再一次 回流+重繪

關於重繪和回流

1. css expression, 這個效率比較低,不推薦使用

#box );

}上面**沒測試,不知道寫錯沒有

與其說用的css,還不如說是js,而且是效率不夠的js。

2. media query,這東西也不是特別好用

h2@media screen and (max-width: 850px)}
用media query會使得字型的變化出現不連貫性,而且要可能設定多個@media,相當麻煩。

3. media query + -webkit-transition實現平滑轉變

div@media only screen and (max-width: 1200px) }

@media only screen and (max-width: 1100px) }

@media only screen and (max-width: 1000px) }

@media only screen and (max-width: 900px) }

@media only screen and (max-width: 800px) }

@media only screen and (max-width: 700px) }

@media only screen and (max-width: 600px) }

@media only screen and (max-width: 500px) }

@media only screen and (max-width: 400px) }

@media only screen and (max-width: 300px) }

字型大小自適應純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,最大 相容性...