简单来说，响应式是为了让网页在各种显示设备上都有不错的浏览体验，
无论是 @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> <p class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></p>
非常方便操作和容易理解地将显示设备按宽度分成了四个区间，各区间内按栅栏占比给予宽度。
然而，随着移动互联网的迅猛突进，以及 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 端缩放浏览器比例保持页面不变的功效。
除此之外，还有淘宝的搞法，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("将根据已有的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("p");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，
而结果来看，字小图大加留白好像反而有些精细的感觉，也解决了上面方法 pc 端字超大的问题。
另外，如果使用此类方法，那么 @media 划分屏宽节点就得靠 rem 了哟，比如淘宝用的 10rem。
最后，再讲一个比较奇葩但又很有效的响应式方法。
<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 一样宽但高度短一截，所以最好再加上一个上下居中的解决办法。
以上就是css如何实现响应式文字大小变化实例详解的详细内容。