您现在的位置是：首页 > 编程语言学习 > 前端编程语言 > 文章正文前端编程语言

ratio.js 移动端自适应方案

神一样的男人 2019-10-14 14:41:23 前端编程语言人已围观

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

　　一个移动端大小屏自适应方案支持插件,可以横向自适应和横竖双向自适应，包括根字号全局适配和标签区域内局部自适应。并且可以开启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、可以设置根字号全局适配和标签区域内局部自适应。