css 中使用em

定义:

em是相对单位，em相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px，也就是1em默认等于16px; ，如果你想给某个文字设定为14px，就这样写 font-size:0.875em; 公式是14/16=0.875em;

注意: 

  • em 的值不是固定的;
  • em 继承父级元素字体大小,  如果父元素字体大小为12px,  则对子元素来说  1em = 12px;

案例:

 1 <!DOCTYPE html>
 2 <html lang="en" style="font-size:100%">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>font-size用法</title>
 6     <script type='text/javascript' src="./jquery-1.7.2.min.js"></script>
 7     <style>
 8     body{font-size:62.5%;       // 10/16=0.625;  即默认字体大小为 10px}
 9     h1{font-size:1.6em;         // 16px}
10     .text{width:40em;           // 宽度 :400px 
11           margin: 1em auto;     //外边距: 10px auto
12           background:#ddd;  }
13     </style>
14     <script>
15         var w;     //浏览器初始值
16 
17         // 屏幕改变大小时, 改变 body 字体大小
18         $(window).resize(function(){
19             if(w){
20                 var s = $(window).width() / w;
21                 $("body").css("font-size", (62.5*s)+'%');
22             }
23         });
24 
25         $(function(){
26             w = $(window).width();
27         });
28     </script>
29 </head>
30 <body >
31     <div class="text">
32         <h1>短发加快速度非常多拿手机开发办法才能到就卡才能大家开始揭穿你打算就卡</h1>
33         <div >
34             短发加快速度非常多拿手机开发办法才能到就卡才能大家开始揭穿你打算就卡
35             <div style="font-size:2em;">松岛枫松岛枫尽快圣诞节</div>
36         </div>
37     </div>
38 </body>
39 </html>

 

posted @ 2015-03-09 14:06  hewep  阅读(162)  评论(0)    收藏  举报