RATIO.JS 移動端自適應方案

已更新 - 強力推薦 (移動端自適應解決方案與仿原生APP超高清超細膩解決方案)
https://gitlab.com/fekits/mc-...

v1.1.0 [Latest version]

一、新增了dpr功能，開啓了DPR功能後，能夠自動設置設備尺寸爲物理分辨率使網頁達到原生APP精細效果。就是解決經典的1px太粗問題

二、新增了fixed參數能夠設置字號縮放時的小數字精度。

首先仍然先上DEMO，這個DEMO開啓了DPR功能，請注意看1px線條粗細度與清晰度，因沒有足夠的老機型，目前並未發現DPR功能開啓後有兼容問題，目前測試機有iphone5s,iphone6s,iphone7s Plus,iphone4,小米(未注意型號)，魅族(未注意型號安卓4.4.4)，若是您發現了任何題麻煩你剪屏聯繫我，謝謝！

http://www.junbo.name/plugins...

// 複製這一段放在HTML頭部便可=========

<script>

"use strict";function ratio(){var n=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},d=document.documentElement,l=n.el||d,o=n.size[0],c=n.size[1]/o,a=n.full,e=function(){n.dpr&&document.getElementsByName("viewport")[0].setAttribute("content","width=device-width,initial-scale=1,minimum-scale="+1/window.devicePixelRatio+",maximum-scale="+1/window.devicePixelRatio+",user-scalable=no");var e,i=d.clientWidth,t=d.clientHeight;e=(e=a&&t/i<c?t/c/o:i/o).toFixed(3),l.style.fontSize=100*e+"px",n.then&&n.then(e)};e(),window.addEventListener("resize",e)}

ratio({

size: [750, 1334],      // 設計稿的尺寸

full:1,     // 開啓全屏模式，將對寬度和高度雙向自適應縮放，這種模式通常用於無滾動條的全屏頁面。

dpr:true,    // 開啓DPR功能，該功能開啓後頁面尺寸轉爲設備物理分辨率尺寸，UI細膩程度達到APP原生級別，好比解決經典的1px太粗問題

fixed:0    // 設置字號精度爲小數點後0位, 建議開啓dpr時，fixed設置爲0,能夠達到元素實際尺寸無小數點從而達到高清效果，1px佔一格物理像素。 

});

</script>

// 寫尺寸規則：全部尺寸寫設計稿尺寸／100，好比設計稿寬600px寫width:6rem,設計稿字號28px寫fint-size:.28rem;// 複製這一段放在HTML頭部便可=========

---

如下爲v1.0.0版本

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-...