移动端自适应flexible.js的详细介绍解析

一、什么是Flexible.js

Flexible.js是一款用于web移动端的解决方案。它基于js，能够在不同大小的设备上实现自适应效果。所谓自适应，就是能够针对不同的屏幕分辨率调整相应的字体大小和元素大小。相比于传统的固定布局，自适应能够更好地适应用户的屏幕，增加用户体验。Flexible.js的最大特点是它可以根据设备的像素比动态调整根元素的字体大小，从而实现自适应效果。Auto dpi（viewport-dpi）是近年来移动设备上流行的屏幕像素比概念，而Flexible.js 可以获取设备的dpi来计算缩放的比例，实现自适应布局。

二、如何使用Flexible.js

说到如何使用Flexible.js，事实上非常的简单。步骤如下：

Step1: 首先将Flexible.js添加到HTML文件中。

  
    <script type="text/javascript" src="path/to/flexible.js"></script>
  

Step2: 然后设置页面中首先渲染的字体大小。

  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <style>
      html {
        font-size: 16px;
      }
    </style>
  

Step3: 最后在你的项目中使用rem作为单位来布局。

以iPhone6（375 * 667px）的设计稿为例，我们在CSS中可以这样写样式：

  
    .box {
      width: 3.75rem;
      height: 6.67rem;
      font-size: .32rem;
      padding: .2rem;
    }
  

在JS里面更好地使用 rem 单位:

  
    rem2px()  // rem转换成px值 
    px2rem()  // px转换成rem值
  

 

三、Flexible.js的使用优势

1、开发效率提高

移动端的布局框架，比如Bootstrap、Foundation等经常会使用默认的宽度设定，这对于手机屏幕过小的情况会显得相对不足。但是，Flexible.js不仅可以根据设备的像素比动态调整根元素的字体大小，而且还能增加rem单位的使用场景，使开发效率更高。

2、良好的屏幕适应性

3、开发重心的转移

4、提升页面的加载速度

在Flexible.js中，可以通过设置 rem 的值达到统一的效果，在设计过程中可以减少图片资源从而提升页面加载速度。因此，将rem作为一种设计布局单位，会改变开发者们之前的对设计的认知，提高开发者的设计能力。

四、Flexible.js不足之处

1、2倍屏幕下的锯齿问题

由于Flexible.js的根据dpi缩放文档根元素字体大小的机制，所以在2倍屏幕下，Flexible.js会产生锯齿的问题。解决方法是通过font-size设置为小数来避免锯齿问题。

2、不支持rem字体适配问题

Flexible.js目前对于rem字体的适配不完美，对于设计中设置了rem字体样式的时候，会根据手机DPI计算得到不同的值，切换字体不自然。

3、与其他CSS框架集成问题

虽然Flexible.js已经成为现代化web项目中越来越重要的解决方案，但是还是存在和不少CSS框架集成问题。在使用时需要特别注意同其他CSS框架的兼容性。

五、Flexible.js的解析和实现原理

(function flexible(window, document) {
    // 获取 HTML跟元素
    var docEl = document.documentElement
    // dpr 物理像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    // 设置body字体大小
    function setBodyFontSize() {
        if (document.body) {
            // 如果页面有body元素则直接设置字体大小
            document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else {
            // 如果页面没有body元素，则等页面主要的DOM元素加载完毕后，再执行setBoydFontSize
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    // 设置HTML元素字体大小
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    // 当页面尺寸发生变化的时候，要重新设置rem的大小
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports
    // 有些浏览器不支持0.5的写法
    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))

以上就是关于Flexible.js的详细介绍。Flexible.js对于网站的用户体验、开发效率、加载速度、屏幕适应性都有极大的提升效果。然而，也有它自身存在的不足之处。建议在使用的过程中，遵循其使用规则，同时也需要注意它和其他CSS框架的集成问题。希望能帮助你在以后的开发中能快速上手flexible.js的使用；