flexible.js-移动端H5页面适配应用

前端页面适配有两大方向：一是布局适配，可以使PC、手机、平板共用一份代码，实现方法有css 媒体查询、css 弹性盒子布局、 css grid布局等。二是高清适配，面对的是移动开发中设备不同分辨率和不同尺寸，最大限度还原设计稿效果。

flexible.js是高清适配的一种方法，它通过javascript根据不同设备的dpr值和设备宽度为html动态设置font-size，其他元素使用rem做单位。推荐先阅读下面两篇文章，了解相关概念和实现原理：

相关概念

flexible原理

基本的用法详见仓库, 在实际运用中碰到几个问题：

• 字体大小，这个问题要根据设计师的要求具体分析。如果要求是在所以设备上字体都统一大小就需要以下做法：

        .title{
            font-size: 19px;
            text-align: center;
        }
        [data-dpr="2"] .title {
            font-size: 37.5px;
        }

复制代码

这样在dpr=1和dpr=2的设备上字体大小是统一的。 但是更多情况下字体大小是和设计稿的其他元素相关联的，需要和整个页面一起缩放，这时直接使用rem作单位就行了。

        .title{
            font-size: 0.5rem;/* 37.5px */
            text-align: center;
        }
复制代码

• 单位换算，默认1rem = 75px，我们从设计稿得到的尺寸是px为单位的，如果要换算成rem作单位需要依赖编译器插件，而且会出现小数的情况。所以可以自定义flexible.js文件，使1rem = 100px, 这样只需心算一下就能换算单位了。详见仓库
• 第三方插件，上述的基本示例中html里并没有设置而是通过flexible.js自动添加的，当dpr=1时缩放比为1，当dpr=2时缩放比为0.5。由于一般第三方插件的尺寸都是依据dpr=1确定大小使用px为单位，所以为了兼容，需要为页面显式设置viewport。详见仓库

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
复制代码

• 自动编译

px2rem-loader : webpack加载器，将px换算rem

gulp-px3rem : gulp插件，将px换算rem

转载于:https://juejin.im/post/5bae1a026fb9a05d31551b9d