您现在的位置是:首页 > 编程语言学习 > 前端编程语言 > 文章正文 前端编程语言
ratio.js 移动端自适应方案
神一样的男人
2019-10-14 14:41:23
前端编程语言
人已围观
简介一个移动端大小屏自适应方案支持插件,可以横向自适应和横竖双向自适应,包括根字号全局适配和标签区域内局部自适应。并且可以开启DPR让网页UI达到原生APP的细腻程度
一个移动端大小屏自适应方案支持插件,可以横向自适应和横竖双向自适应,包括根字号全局适配和标签区域内局部自适应。并且可以开启DPR让网页UI达到原生APP的细腻程度
万晓博SEO推荐服务器:

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
万晓博SEO推荐服务器:

相关文章
文章评论
点击排行
- 【hdvideoPT下载站】hdvideo每月定期开放注册,此法是否可取?
- PT下载站:m-team(馒头)网站打不开了?m-team(馒头)最新访问域名!
- 【经典黑客大片】黑客帝国1-4部,全部2160pHDR全集下载 (BluRay/WEB-DL) 外挂双语 [已刮削]
- VMware Workstation 17 pro永久激活,无限制!附序列号,直接上高速!
- usmt.ppkg是什么文件
- 毒液2部全集,全部4K(2160P) REMUX(原盘 蓝光)
- 【群晖NAS迁移数据】群晖NAS换新机器数据迁移3种方法,这次给讲全了!
- 【经典老片】成龙大哥主演神话(2005)1080 REMUX(蓝光原盘)下载,赶紧下载!
站长推荐
标签云
猜你喜欢
站点信息
打赏本站
- 如果你觉得本站很棒,可以通过扫码支付打赏哦!
- 微信扫码:你说多少就多少~
- 支付宝扫码:你说多少就多少~