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