RATIO.JS 移动端自适应解决方案

已更新 - 强力推荐  (移动端自适应解决方案与仿原生APP超高清超细腻解决方案)

请移步: https://www.jianshu.com/p/f8e715b8c895



以下为v1.0.0版本

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

先看效果:http://fekit.asnowsoft.com/plugins/ratio/v1.0.0/    建议打开调试台使用移动端模式查看,前端都懂的!

全屏页面使用示例:

// 复制这一段放在HTML头部即可=========

function ratio(i){var c=document.documentElement,l=i.el||c,o=i.size[0],s=i.size[1]/o,d=i.full,e=function(){var e,t=c.clientWidth,n=c.clientHeight;e=d&&n/t<s?n/s/o:t/o,l.style.fontSize=100*e+"px",i.then&&i.then(e)};e(),window.addEventListener("resize",e)}

// size:[设计稿宽度,设计稿高度] 请无视缩放倍率,设计稿是多少就写多少  full:ture开启宽度双向自适应(适应于全屏页面),false仅开启宽度自适应(适应于滚动页面)

ratio({size: [750, 1334], full:1});

// 写尺寸规则:所有尺寸写设计稿尺寸/100,比如设计稿宽600px写width:6rem,设计稿字号28px写fint-size:.28rem;

// 复制这一段放在HTML头部即可=========

滚动页面使用示例:

ratio({size: [750, 1334], full:0});       // full改成false或0或不写

gitlab网址:https://gitlab.com/fekits/mc-ratio

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 6,164评论 0 2
  • 超高速音视频编码器用法: ffmpeg [options] [[infile options] -i infile...
    吉凶以情迁阅读 10,124评论 0 4
  • 破窗效应与火炉原则。一粒老鼠屎坏一锅粥与近墨者黑。对于小错,为什么会出现姑息的情况呢,大部分管理者是认为与人性化管...
    大梦张吉玲阅读 1,553评论 0 0
  • 十一点半的起床 夜没有了猖狂 窗外攻城略地的阳光 围堵着让我投降 瘫软着等着正晌 一具腹空草草的皮囊 连咸鱼也算不...
    小小文阅读 1,696评论 2 5