web開發(fā)中有哪些響應式文字-創(chuàng)新互聯(lián)

非常方便操作和容易理解地將顯示設備按寬度分成了四個區(qū)間，各區(qū)間內(nèi)按柵欄占比給予寬度。

然而，隨著移動互聯(lián)網(wǎng)的迅猛突進，以及 WebApp 的使用，也由于手機的分辨率和尺寸被廠商們不斷更新，

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

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

所以為了解決這些問題產(chǎn)生了非常豐富的解決方案，我們一個一個來。

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

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 的考慮。

這里并沒有直接在設置 font-size 的時候就乘以 0.12 的原因可能是，這樣會比較容易算寬度吧，比如 3.75rem 便是一個屏寬咯。

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

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

元素縱橫比直接用數(shù)值就能完成，因為現(xiàn)在的 rem 就像百分比那樣非常自動了，

后來發(fā)現(xiàn)，它還有 PC 端縮放瀏覽器比例保持頁面不變的功效。

除此之外，還有淘寶的搞法，lib-flexible.js。

!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("將根據(jù)已有的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 便是一個屏寬，但在文字方面不太一樣，

淘寶網(wǎng)觸屏版 并不想讓字體越來越大，而始終為 12px 或 24px，

而結(jié)果來看，字小圖大加留白好像反而有些精細的感覺，也解決了上面方法 PC 端字超大的問題。

另外，如果使用此類方法，那么 @media 劃分屏寬節(jié)點就得靠 rem 了喲，比如淘寶用的 10rem。

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

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

375px 就是半個屏幕，這對做應用場景 H5 的小伙伴可謂是福音，做雪碧圖用 px 定位什么的才是最爽的，

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“web開發(fā)中有哪些響應式文字”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。