已更新 - 強(qiáng)力推薦? (移動端自適應(yīng)解決方案與仿原生APP超高清超細(xì)膩解決方案)
請移步:?http://www.reibang.com/p/f8e715b8c895
以下為v1.0.0版本
RATIO.JS使用簡單復(fù)制粘帖即用蚁孔。亮點(diǎn):全屏模式可開啟寬高雙向自適應(yīng)谷誓!
先看效果:http://fekit.asnowsoft.com/plugins/ratio/v1.0.0/? ? 建議打開調(diào)試臺使用移動端模式查看,前端都懂的凰浮!
全屏頁面使用示例:
// 復(fù)制這一段放在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:[設(shè)計稿寬度,設(shè)計稿高度] 請無視縮放倍率榜聂,設(shè)計稿是多少就寫多少? full:ture開啟寬度雙向自適應(yīng)(適應(yīng)于全屏頁面)宁脊,false僅開啟寬度自適應(yīng)(適應(yīng)于滾動頁面)
ratio({size: [750, 1334], full:1});
// 寫尺寸規(guī)則:所有尺寸寫設(shè)計稿尺寸/100,比如設(shè)計稿寬600px寫width:6rem,設(shè)計稿字號28px寫fint-size:.28rem;
// 復(fù)制這一段放在HTML頭部即可=========
滾動頁面使用示例:
ratio({size: [750, 1334], full:0}); ? ? ? // full改成false或0或不寫
gitlab網(wǎng)址:https://gitlab.com/fekits/mc-ratio