字體大小自適應純css解決方案【轉】-有解無憂

viewpoint

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

“viewpoint” = window size

vw = 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+

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Demo</title>
    <style type="text/css">
        #box { font-size: 4vw;}
    </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 { margin:0; padding: 0;}
        .wrap { background: blue; width: 100%;}
        .box { width: 900px; height: 200px;}
    </style>
</head>

<body>
    <div class="wrap"><div class="box"></div></div>
</body>
</html>

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

bug處理

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

window.onresize = function(){
    var box = document.getElementById("box");
    box.style["z-index"] = 1;
}

z-index可以對應的元素被重繪（repaint），

延伸一點點關于重繪（repaint）和回流（reflow）的知識：

添加、洗掉元素(回流+重繪)

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

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

對style的操作(對不同的屬性操作，影響不一樣)

還有一種是用戶的操作，比如改變瀏覽器大小，改變瀏覽器的字體大小等(回流+重繪)
讓我們看看下面的代碼是如何影響回流和重繪的:
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 { star:expression(onresize = function(){
                var res = parseInt(this.style.width) / 20;
                res = res < 9 : "9px" ? res + "px";
                this.style.fontSize = res;
            });
        }
//P.S:上面代碼沒測驗，不知道寫錯沒有

與其說用的css，還不如說是JS，而且是效率不夠的JS，

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

h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* 可視區域小于 850px, 設定更小font-size屬性 */
   h2{
     font-size:19px;
   }
}

用media query會使得字體的變化出現不連貫性，而且要可能設定多個@media，相當麻煩，

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

div{
    font-size: 40px;
    -webkit-transition:font-size 0.2s ease-out;
}

@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
@media only screen and (max-width: 800px) { div{ font-size: 35px; }}
@media only screen and (max-width: 700px) { div{ font-size: 34px; }}
@media only screen and (max-width: 600px) { div{ font-size: 33px; }}
@media only screen and (max-width: 500px) { div{ font-size: 32px; }}
@media only screen and (max-width: 400px) { div{ font-size: 31px; }}
@media only screen and (max-width: 300px) { div{ font-size: 30px; }}

小結

這玩意兒其實也沒太大作用，用JS處理相當簡單，不知道大家還有沒有其他比較好的方案，可以提出來交流下~

參考檔案

Viewport Sized Typography

文章來自：https://blog.csdn.net/dyllove98/article/details/9246397

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/65725.html

標籤：Html/Css

上一篇：2020年校招東軟面經

下一篇：children和childNodes差異【轉】