您现在的位置是：首页 > 编程语言学习 > 前端编程语言 > 文章正文 前端编程语言
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、可以设置根字号全局适配和标签区域内局部自适应。
作者：xiaojunbo
链接：https://www.jianshu.com/p/eb056f121315
