zoukankan      html  css  js  c++  java
  • css3 字体自适应

    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+

    DEMO地址:http://qianduannotes.sinaapp.com/test/fontResize.html  (已经用JS修正重绘bug)

    <!DOCTYPE HTML>  
    <html>  
    <head>  
    	<meta charset="UTF-8">  
    	<title>CSS3 Demo</title>
        <style type="text/css">
            #box {  10em; padding: 15px; font-size: 1em;}
            #box2 { font-size: 4vw;}
        </style>
    </head>
    
    <body>
        <div id="box">
            我是barret lee 我是barret lee 我是barret lee
        </div>
        <div id="box2">
            我是barret lee 我是barret lee 我是barret lee
        </div>
    <script type="text/javascript">
    window.onresize = function(){
        var box2 = document.getElementById("box2");
        box2.style["z-index"] = 1;
    }
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    第五章4
    第五章3
    第五章2
    第五章1
    第四章14
    第四章13
    第四章12
    第四章11
    第五章例5-6
    第五章例5-4
  • 原文地址:https://www.cnblogs.com/webskill/p/4592396.html
Copyright © 2011-2022 走看看