RATIO.JS 移动端自适应方案

2019-05-20

2,955次阅读

一个移动端大小屏自适应方案支持插件,可以横向自适应和横竖双向自适应，包括根字号全局适配和标签区域内局部自适应。并且可以开启DPR让网页UI达到原生APP的细腻程度

RATIO.JS使用简单复制粘帖即用。亮点：全屏模式可开启宽高双向自适应！

先看效果:https://www.junbo.name/plugins/ratio/v1.1.1/ 建议打开调试台使用移动端模式查看，前端都懂的！

参数

{
    el   : 'id',               {DomObject}   DOM对象，如果不填则默认为HTML根标签
    size : [750, 1334],        {Number}      设计稿的尺寸
    full : true | false,       {Boolean}     是否开启全屏模式？如果开启开屏模式则对宽度和高度双向自适应 *
    dpr:   true | false        {Boolean}     开启DPR功能,开启DPR后网页尺寸将设置为设备物理分辨率，网页1px可以达到原生APP细腻程度
    fixed: 2                   {Number}      设置字号精度为小数点后2，一般建议为2位
    then : function () {}      {Function}    自适应字号改变时的回调
}

示例

全局自适应：

// 调用暴露的window下的fekit.mcRatio方法，以下实例没有指定el则默认设置THML根标签字号。
fekit.mcRatio({
        size:  [750, 1334],                  // 设计稿的尺寸
        full:  true,                         // 开启全屏模式，将对宽度和高度双向自适应缩放，这种模式一般用于无滚动条的全屏页面。
        dpr:   true,                         // 开启DPR功能
        fixed: 2                             // 设置字号精度为小数点后2位
});

全局自适应：

// 模块化方式,以下实例没有设置full为true，则默认不开启高度自适应，仅对宽度做自适应缩放，这种一般用于有滚动条的页面。同时也不开启DPR功能
fekit.mcRatio({
        size:  [750, 1334],                  // 设计稿的尺寸
});

局部自适应

// 以下示例仅对指定ID为area的元素做自适应，需要注意的是，如果你仅对网页中的部分区域做自适应，请勿开启dpr功能，该功能将影响全局网页
mcRatio({
    el:    document.getElementId('area'),    // 为ID为area的标签设置自适应字号，当字号不是设置在HTML根标签时，只能在区域内用em方案自适应
    size:  [750, 1334],                      // 设计稿的尺寸
    fixed: 2
});

版本

v1.1.1 [Latest version]
1、判断<head>中是否有<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">,如果没有则自动创建一个

v1.1.0
1、新增了dpr功能，开启了DPR功能后，可以自动设置设备尺寸为物理分辨率使网页达到原生APP精细效果。就是解决经典的1px太粗问题
2、新增了fixed参数可以设置字号缩放时的小数字精度。

v1.0.0
1、实现了横向自适应和横竖双向自适应，并且竖向自适应可自由设定阀值。
2、可以设置根字号全局适配和标签区域内局部自适应。

gitlab网址

作者：xiaojunbo
链接：https://www.jianshu.com/p/eb056f121315

正文完

要饭中，多少给点吧（支付宝)