RATIO.JS 移动端自适应方案

2019-05-20
2,947次阅读
没有评论

RATIO.JS 移动端自适应方案

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

正文完
要饭中,多少给点吧(支付宝)
post-qrcode
 
评论(没有评论)
验证码