ITPub博客

首页 > IT职业 > IT图书 > RATIO.JS 移动端自适应方案

RATIO.JS 移动端自适应方案

IT图书 作者:longbow 时间:2021-09-09 09:59:58 0 删除 编辑

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

先看效果:http://junbo.name/plguins/ratio/    建议打开调试台使用移动端模式查看,前端都懂的!

全屏页面使用示例:

// 复制这一段放在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

// 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或不写



作者:xiaojunbo
链接:https://www.jianshu.com/p/eb056f121315


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1696/viewspace-2814879/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-15

  • 博文量
    95
  • 访问量
    560