幾種響應式文字的玩法

上一篇 三種響應式文字 未通過十分嚴謹地調查，錯誤頗多，因而在此篇重頭來過。

 

講真，其實我也不知道該如何爲此篇開頭，

由於響應式文字需不須要作其實我也沒有深刻探究過，

但在學習其餘網站的過程當中，我發現了一些比較新奇的作法，因此想試着梳理一下，

爲什麼會出現這種有些奇怪，可能實則很是奇妙的解決方案。

若是理解有誤差的地方，還望大佬們不吝賜教。

 

簡單來講，響應式是爲了讓網頁在各類顯示設備上都有不錯的瀏覽體驗，

不管是 @media 將元素換行，後臺獲取 userAgent 返回不一樣頁面，利用 viewport 限定視圖，仍是利用根元素 html 屬性來計算大小等，

他們都能實現各自編程特點的響應式佈局，非要說誰是最優，恐怕仍是得依需求而定。

 

接下來咱們先大體羅列一下，這幾種佈局方法的如何施展的。

 

衆所周知的 Bootstrap，它的柵欄佈局即爲媒體查詢的表明，徹底經過屏寬來判斷元素是否換行和是否顯示。

<style>
.col-xs-2 {width: 50%}
@media (min-width: 768px) {
    .col-sm-3 {width: 33.333333%}
}
@media (min-width: 992px) {
    .col-md-4 {width: 25%}
}
@media (min-width: 1200px) {
    .col-lg-5 {width: 20%}
}
</style>

<div class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></div>

很是方便操做和容易理解地將顯示設備按寬度分紅了四個區間，各區間內按柵欄佔比給予寬度。

 

然而，隨着移動互聯網的迅猛突進，以及 WebApp 的使用，也因爲手機的分辨率和尺寸被廠商們不斷更新，

768px 如下的設計要求也相應拔高，人們開始對響應式的要求也有了些改變。

好比 iPhone4 上的文字大小還適合 iPhone6 嗎，Retina 屏的 1px 問題，devicePixelRate 和屏幕縮放問題等等...

因此爲了解決這些問題產生了很是豐富的解決方案，咱們一個一個來。

 

首先，隨着屏幕越大，字體大小也愈來愈大，好像是個不錯的想法耶。

html { font-size: 10px;}
@media (min-width: 376px) and (max-width: 414px) {
    html{font-size: 11px;}
}
@media (min-width: 415px) and (max-width: 639px) {
    html{font-size: 13px;}
}
@media (min-width: 640px) and (max-width: 719px) {
    html{font-size: 14px;}
}
@media (min-width: 720px) and (max-width: 749px) {
    html{font-size: 15px;}
}
@media (min-width: 750px) and (max-width: 799px) {
    html{font-size: 16px;}
}
@media (min-width: 800px) and (max-width: 992px) {
    html{font-size: 20px;}
}
body {
    margin: 0;
    font-size: 1.6rem;
}

實踐狀況告訴咱們，在 iPhone6 plus 上這種字大的體驗確實不賴。

不過好像並非字越大就越好看，好比在 iPad 上，字大絕對不是一個好的視覺體驗。

 

因此又有了另外一種搞法，根元素的字體大小由寬度和 devicePixelRate 來計算求得，也比上面的方法更注重了 dpr 的考慮。

<style>
body {font-size: .12rem}
</style>

<script>
!function() {
    function e() {
        r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}"
    }
    var t = navigator.userAgent,
        n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window),
        i = document,
        a = i.documentElement,
        o = (n.devicePixelRatio, 375),
        d = 100,
        r = (i.head.querySelector('[name="viewport"]'), i.createElement("style"));
    r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1);
    a.className += t.match(/ucbrowser/i) ? " app-uc " : ""
}();
</script>

這裏並無直接在設置 font-size 的時候就乘以 0.12 的緣由多是，這樣會比較容易算寬度吧，好比 3.75rem 即是一個屏寬咯。

固然不用百分比而用 rem 來定寬，也是有些好處的。

好比兩欄式百分比佈局的間隙也只能百分比咯（calc 另當別論）形成左右和上下間隙不相等，

元素縱橫比直接用數值就能完成，由於如今的 rem 就像百分比那樣很是自動了，

後來發現，它還有 PC 端縮放瀏覽器比例保持頁面不變的功效。

 

然後又在此基礎上又發現另外一插件 adaptive.js，基本同上，只是 1px=0.1rem 更好計算了。

但又有極大的不一樣，它的字體大小是按比例縮放的，也就是保證了全部設備上除了高度不一樣，看到的樣子是徹底不變的。

能夠設置設計稿寬度，默認字體大小，愈加簡化設計稿到開發的長度計算過程。最後調用一個 init()，開啓該插件。

然而，要注意一下，此插件在屏寬較大時，字體也會更大，所以最好設定 maxWidth 屬性。

<script src="js/adaptive.js"></script>
<script>
    window['adaptive'].desinWidth = 640;
    window['adaptive'].baseFont = 24;
    window['adaptive'].maxWidth = 480;  // 此寬度最佳
    window['adaptive'].setRemCallback = function () {
        // 每次變換的回調
    }
    window['adaptive'].init();
</script>

 

除此以外，還有淘寶的搞法，lib-flexible.js，它繼承了上面 rem 式響應式佈局的優勢。

!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("將根據已有的meta標籤來設置縮放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={})); 

它和上面的方法在 rem 方面是相似的，10rem 即是一個屏寬，但在文字方面不太同樣，

淘寶網觸屏版 並不想讓字體愈來愈大，而始終爲 12px 或 24px，保證了圖片和佈局方面的百分比變化，但文字小巧不變的模樣。

其次，640的設計稿，1px=1/(640/10)*2rem，750的設計稿：1px=1/(750/10)*2.3333rem，

那麼須要用到 px 轉 rem 的一些快捷方法，好比 sublime 插件 cssrem。

值得注意的是，@media 時的 10rem 是原來的那個 10rem，並不是 750 設計稿屏寬對應的 10rem。

並且假設咱們進行了媒體查詢讓內容寬度變成 20rem，但高度 10rem 也是須要從新設定改成 20rem 才能是正方形了。

 

最後，再講一個比較奇葩但又頗有效的響應式方法。

<meta name="viewport" content="width=750,user-scalable=no" />

<style>
html, body {
    width: 750px;
    margin: 0 auto;
    overflow: hidden;
}
</style>

有沒有感受到一股我無論我不聽的倔強氣息，這種方法意味着，無論設備怎樣，我只當設備是 750px 視圖大小的設備。

375px 就是半個屏幕，這對作應用場景 H5 的小夥伴可謂是福音，作雪碧圖用 px 定位什麼的纔是最爽的，

但它也有着它的壞處，也就是設備的寬高比是不定的，好比 iPhone4 和 iPhone5 同樣寬但高度短一截，因此最好再加上一個上下居中的解決辦法。

 

這幾種方法都各有特點，有各自方便的角度，因此依照需求和喜愛，多研究下吧，我也指望能有人來 和我討論，麼麼噠