HTML/CSS

详解使用『rem』实现自适应响应式布局

也想出现在这里?联系我们
创客云

rem 是相对于根元素,这样就意味着,我们只需要在根元素确定一个 px 字号,则可以来算出元素的宽高。本文讲的是如何使用 rem 实现自适应。rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到 rem 大家一定会想起 em 单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了 rem。就算对不支持的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小。

也想出现在这里?联系我们
创客主机

使用%单位方便使用,css 中的 body 中先全局声明 font-size=62.5%,这里的 % 的算法和 rem 一样。因为 100%=16px,1px=6.25%,所以 10px=62.5%,这是的 1rem=10px,所以 12px=1.2rem。px 与 rem 的转换通过 10 就可以得来,很方便了吧!

使用方法

注意,rem 是只相对于根元素 htm 的 font-size,即只需要设置根元素的 font-size,其它元素使用 rem 单位设置成相应的百分比即可;

  1. /*16px * 312.5% = 50px;*/
  2. HTML {
  3.   font-size: 312.5%;
  4. }
  5. /*50px * 0.5 = 25px;*/
  6. body {
  7.   font-size: 0.5rem;
  8.   font-size: 25px;
  9. }

一般情况下,是这样子使用的

  1. html{font-size:62.5%;} 
  2. body{font-size:12px;font-size:1.2rem ;} 
  3. p{font-size:14px;font-size:1.4rem;}

优点,用一个东西肯定要知道它的好处啦,由于其他字体大小都是基于 html 的,所以在移动端做适配的时候,可以使用这样的方法

  1. @media only screen and (min-width: 320px) {
  2.   html { font-size: 62.5% !important; }
  3. }
  4. @media only screen and (min-width: 640px) {
  5.   html { font-size: 125% !important; }
  6. }
  7. @media only screen and (min-width: 750px) {
  8.   html { font-size: 150% !important; }
  9. }
  10. @media only screen and (min-width: 1242px) {
  11.   html { font-size: 187.5% !important; }
  12. }

(增加 js 处理部分,供参考,待理解)基本思路就是:利用 rem 单位,就是相对于跟(html)字体的大小,来计算相应元素的宽高,一般将 html 的 font-size 设置为:20px 或 30px 或 50px 或 100px 还有利用浏览器默认自己大小(16px)也就是 16px*62.5%=10px ,这样就是 html{font-size:62.5%;},而不是 html{font-size:10px;} 因为浏览器(PC)最小就是 12px。这样一来 1rem = 10px;

我们来简单的看一下:

  1. <div id="wrap">
  2.   <div id="div1">我是一个div标签</div>
  3. </div>

CSS 设置样式

  1. #wrap{    font-size: 20px;}
  2. #div1{    
  3.   font-size: 1em;  
  4.   width: 16em;   
  5.   height: 2em; 
  6.   background-color: lawngreen;
  7. }

这里说一下为啥不用 em,因为 em 是相对于父级字体大小的,这样一层套一层比较麻烦,还有就是当我想改变其中一个 div 的字体大小时,整个布局就乱套了。

还有一个问题就是当我们的浏览器窗口发生大小变化时,原来的布局是不是也应该完美的显示呢。这里我们就利用 js 来根据浏览器可视区(clientWidth)来重新给 html 设置响应的字体大小。

  1. /* 这里我们利用了一个自执行函数 */
  2. (function(){  
  3.     change();  
  4.     function change(){     
  5.          /* 这里的html字体大小利用了一个简单书序公式(十字相乘),当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的html的fontSize(clientWidth  新的值)就是clientWidth*20/320 */
  6.          document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  
  7.     }    
  8.  /* 监听窗口大小发生改变时 */
  9.   window.addEventListener('resize',change,false);})();

注意:一般情况下我们利用 rem 单位来设置元素的宽高就行,没必要页面中的所有元素都用 rem 来弄(当然了这个也得看具体需求了)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

12

12.12 惠不可挡

每逢双12,难免心潮澎湃,亲们,准备好了吗?

①、原版主题安装冬日暖心价60元/次(原价120元/次) ---》详询客服

①、云主机买一年送一年,买两年送两年,高速、稳定、免备案 ---》云主机

③、双十二限时促销,在模板市场购买任意模板赠送VIP年度会员火热进行中 ---》云模板

咨 询 客 服