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

因為響應式文字需不需要做其實我也沒有深入探究過，

但在學習其他網站的過程中，我發現了一些比較新奇的做法，所以想試著梳理一下，

為何會出現這種有些奇怪，可能實則非常奇妙的解決方案。

如果理解有偏差的地方，還望大佬們不吝賜教。

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

無論是 @media 將元素換行，后臺獲取 userAgent 返回不同頁面，利用 viewport 限定視圖，還是利用根元素 html 屬性來計算大小等，

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

接下來我們先大致羅列一下，這幾種布局方法的如何施展的。

眾所周知的 Bootstrap，它的柵欄布局即為媒體查詢的代表，完全通過屏寬來判斷元素是否換行和是否顯示。

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