几种响应式文字详解

讲真，其实我也不知道该如何为此篇开头，

因为响应式文字需不需要做其实我也没有深入探究过，

但在学习其他网站的过程中，我发现了一些比较新奇的做法，所以想试着梳理一下，

为何会出现这种有些奇怪，可能实则非常奇妙的解决方案。

如果理解有偏差的地方，还望大佬们不吝赐教。

简单来说，响应式是为了让网页在各种显示设备上都有不错的浏览体验，

无论是 @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>