等比缩放之自适应神器——css3的rem

1.rem简介

  rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

 

2.rem兼容性

 

      rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法支持。

      不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧，谁让这个Ie6-8这么老呢？可以针对低版本的IE浏览器做一定的处理：

 

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. html { font-size: 62.5%; }   
  2. body { font-size: 14px; font-size: 1.4rem; } /* =14px */  
  3. h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */  

 

      这样一来解决了IE低版本的不能兼容的问题，但生出另一个不足地方，就是增加了代码量。必竟鱼和熊掌很多时候不能兼得嘛。

3.rem使用

      前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。

      假设就使用浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

 

      如果你要设置一个不同的值，那么需要在根元素<html>中定义，为了方便计算，时常将在<html>元素中设置font-size值为62.5%:

 

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. html {  
  2.     font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */  
  3. }  

 

     相当于在<html>中设置font-size为10px。

 

4.例子：图片文字等等比缩放自适应

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <meta charset="UTF-8">  
  4. <meta name="viewport" content="width=device-width, initial-scale=1" />  
  5. <script src="jquery-1.7.1.min.js"></script>  
  6. <title>home</title>  
  7. <style>  
  8. body {  
  9.     margin: 0;  
  10.     padding: 0;  
  11.     border: 0;  
  12.     background: #fd3b36;  
  13.     font-family: Microsoft Yahei, Arial, sans-serif;  
  14.     overflow-x: hidden;  
  15. }  
  16. #mainpage {  
  17.     background: url(home.png) no-repeat;  
  18.     background-size: 100%;  
  19.     width: 6.4rem;  
  20.     height: 11.36rem;  
  21. }  
  22. #content {  
  23.     width: 5.5rem;  
  24.     font-size: 0.26rem;  
  25.     margin: 0 auto;  
  26.     padding-top: 4.4rem;  
  27.     color: #fff;  
  28.     line-height: 0.38rem;  
  29. }  
  30. #btn {  
  31.     text-align: center;  
  32. }  
  33. #btn img {  
  34.     width: 3.66rem;  
  35.     height: 0.96rem;  
  36.     margin-top: 0.64rem;  
  37. }  
  38. </style>  
  39. <title>活动首页</title>  
  40. <body>  
  41. <div id="mainpage">  
  42.     <div id="content">在这个阖家团圆、祝福新年的节日，祝大家新年快乐，万事大吉，平平安安，羊年行大运，发大财。</div>  
  43.     <div id="btn">  
  44.         <img src="btn.png">  
  45.     </div>  
  46. </div>  
  47. <script>  
  48. /*将根元素字号大小设置为：屏宽与图宽的比；  
  49. 由于chrom对10px以下的字不再缩小，而且手机屏  
  50. 都比较小，所以作为默认字体大小又乘了100，这样  
  51. 计算其他元素大小时，量出图上大小再除以100就可以了*/  
  52. function defaultfont() {  
  53.     var sw = $(window).width();  
  54.     var pw = 640;  
  55.     var f = 100*sw/pw;  
  56.     $('html').css('font-size', f+'px');  
  57. }  
  58. /*之所以要延时100ms再调用这个函数是因为  
  59. 如果不这样屏幕宽度加载会有误差*/  
  60. defaultfont();  
  61. setTimeout(function(){  
  62.     defaultfont();  
  63. }, 100);  
  64. </script>  
  65. </body>  
  66. </html>  



 

posted @ 2016-11-21 01:03  源哥来了  阅读(442)  评论(0)  编辑  收藏  举报