css3提供了一些與當前viewpoint相關的元素,vw,vh,vim等。
「viewpoint」 = window sizevw = 1% of viewport width相容性:chrome 20+/ safari 6+/ ie 10+ / ff 19+ / ios 6+1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大
(已經用js修正重繪bug)
doctype html>但是該方案存在乙個bug,上面的**,當瀏覽器視窗變化的時候,box中的文字並沒有按照應有的比例變化,但是css3標準中是這麼說的:demotitle>
#box
style>
head>
我是靖鳴君 我是靖鳴君 我是靖鳴君
div>
body>
html>
when the height or width of the viewport is changed, they are scaled accordingly.像這樣的問題,我之前也遇到過,比如以下**:(小插曲,可跳過)
doctype html>box的寬度設定為900px,wrap設定為100%;縮小瀏覽器視窗,當寬度小於900時會出現滾動條,向右滾動,會發現藍色部分並不是100%,這個問題大家可以去思考下。css3 demotitle>
body, div .wrap .box
style>
head>
div>div>
body>
html>
回到上面的問題,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) }這玩意兒其實也沒太大作用,用js處理相當簡單,不知道大家還有沒有其他比較好的方案,可以提出來交流下~@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,最大 相容性...