RATIO.JS 移动端自适应方案

6次阅读

共计 702 个字符,预计需要花费 2 分钟才能阅读完成。

RATIO.JS 使用简单复制粘帖即用。亮点:全屏模式可开启宽高双向自适应!
先看效果:http://junbo.name/plugins/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<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-…

正文完
 0