zoukankan      html  css  js  c++  java

  • 等比缩放之自适应神器——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.      6.4rem;  
    20.     height: 11.36rem;  
    21. }  
    22. #content {  
    23.      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.      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>  
  • 相关阅读:
    多一盎司定律
    工作职场中，需要养成并实践的思维模型
    中国易经大师排名，易学十大泰斗人物
    大易人生 --- 曾老
    中道管理 --- 曾老
    大数据分析的道与术
    人应该服从自己的规划
    练习不是让你一次就把事情做好，而是帮助你做的越来越好
    让理想转个弯
    在酒桌上就能搞定生意
  • 原文地址：https://www.cnblogs.com/yzycoder/p/6084126.html
Copyright © 2011-2022 走看看