登录  /  注册
首页 > web前端 > js教程 > 正文

rem绝对自适应方案解析

一个新手
发布: 2017-10-12 10:40:40
原创
1382人浏览过

rem

  css3新增的rem是现在非常受欢迎的单位。看一下mdn上的说明:

  这个单位代表根元素的 font-size 大小(例如  元素的font-size)。

  使用这个单位可以创建完美的可扩展布局,只需根据页面大小去修改html的font-size,就能达到适配整个页面的目的。那么问题来了,如何使html的font-size自适应呢?

媒体查询

  media的用法这里就不赘述,简单说明通过媒体查询修改html的font-size以达到页面自适应的目的。

    html如下:


  <article class="container">
    <ol>
      <li>rem是相对于root元素(html)字体大小的一个单位。 eg:html默认font-size为16px  则1rem = 16px</li>
      <li>若元素以rem为单位去设置字体、宽高、边距等。则修改html字体大小就能达到所有元素一起等比例修改的效果</li>
      <li>所以要实现html字体在不同页面大小下自适应</li>
    </ol>
  </article>
登录后复制

    css如下:


//媒体查询控制html字体大小 
 @media (max-width:767px) {
    html{
      font-size: 14px;
    }
  }
  @media (min-width:768px) {
    html{
      font-size: 16px;
    }
  }
  @media (min-width:992px) {
    html{
      font-size: 20px;
    }
  }

//页面元素的简单样式
  .container{
    padding: 1rem;
  }
  li{
    font-size: 1rem;
  }
登录后复制

  通过媒体查询,在不同大小区间的页面上,设置html的font-size都不一样;

  页面宽度为700px时,html的字体大小为14px,此时 1rem = 14px ,li元素的字体大小就是14px,包裹的内边距也是14px;改变页面宽度为800px,html的字体大小为16px,此时 1rem = 16px ,li元素的字体大小变为16px,包裹的内边距也变为16px;

  这种方式当然媒体查询划分的越细致,自适应越强,但是无法实现完全自适应,只是区间性的。

vw

  vw代表的视口的 1/100 100vw代表的即是视口的宽度。使用它我们就可以实现html的font-size完全自适应了。

  css如下:


  html{
    font-size: calc(16/768*100vw);   //以768时16px为标准进行缩放
  }
登录后复制

  例子的768px为一个假设的标准值,一般设计稿的大小为标准,然后再进行适配。调节页面大小,可以完全自适应。

JS调整

  加载页面和调整窗口大小的时,设置html的字体大小,已达到自适应的目的。


    (function(){
      var doc = document.documentElement,
          resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;;

      function changeFontSize(){
        var clietWidth = doc.offsetWidth,
            scale = clietWidth/768;   //以768为标准

        doc.style.fontSize = scale * 16 + &#39;px&#39;;      }

      if (!doc.addEventListener) return;

      window.addEventListener(resizeEvt,changeFontSize)  //窗口大小变化或者手机横屏
      document.addEventListener(&#39;DOMContentLoaded&#39;,changeFontSize) //加载页面触发
    })()
登录后复制

  1、获取视口宽度

  2、以视口宽度对标准的变化,设置html的font-size

以上就是rem绝对自适应方案解析的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号