移动端H5通过flexible.js+rem自适应适配方案

一、 rem实际开发适配方案

(1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小;
(2)CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值;

技术方案1	技术方案2
媒体查询	flexible.js
rem	rem
less	vscode插件cssrem

总结:两种方案都可以，一般推荐第二种方案，更简单操作

二、简洁高效的rem配方案flexible.js

原理

手机淘宝团队出的简洁高效移动端适配库它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。我们要做的,就是确定好我们当前设备的html文字大小就可以了比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/ 10)就可以里面页面元素rem值:页面元素的px值/ 75 剩余的,让flexible.js来去算

页面元素大小取值方法

①最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)) ②屏幕宽度/划分的份数就是html的 font-size的大小 ③或者:页面元素的rem值=页面元素值(px) / html font-size字体大小

三、使用步骤

技术选型案例

方案:我们采取单独制作移动页面方案·
技术:布局采取rem适配布局 ( flexible.js rem )
设计图:本设计图采用750px设计尺寸

1.下载flexible.js

github下载地址: https://github.com/amfe/lib-flexible

index.js中原理是把当前设备划分为10等份

代码语言：javascript复制

// set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem   'px'
  }

2.设置meta标签

代码语言：javascript复制

3.引入flexible.js

代码语言：javascript复制

4.初始化style

代码语言：javascript复制

      /* 如果屏幕超过了750px，那么我们就就按照750px设计稿来走，不会让页面超过750px ,使用媒体查询来设置*/
      @media screen and (min-width: 750px) {
        html {
          font-size: 75px !important;
        }
      }
      body {
        min-width: 320px;
        max-width: 750px;
       /* flexible.js把设计稿750px进行10等分，所以html文字大小设置为75px(750px/ 10)，页面元素rem值:页面元素的px值/ 75(750px/75)*/
        width: 10rem;
        margin: 0 auto;
      }

这样就完成了，然后就可以根据750的设计稿进行在移动端开发了同样要是640的设计稿，则要设置html根字体cssroot为64

5.辅助工具

VSCode px转rem插件 cssrem;

image.png

作用：编写代码时自动根据写的px单位计算出等于多少rem
注意： cssrem默认的html字体大小cssroot为16px ，因此要修改为此时的75px；
修改方法:在vscode设置中查找cssroot，设置为75，设置完成后重新启动vscode就可以了；具体可以查看此插件VSCode cssrem插件

五、flexible.js源代码

代码语言：javascript复制

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr)   'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem   'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

网站 javascript html github ide

0 人点赞