web开发中有哪些响应式文字-创新互联

非常方便操作和容易理解地将显示设备按宽度分成了四个区间，各区间内按栅栏占比给予宽度。

然而，随着移动互联网的迅猛突进，以及 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 的考虑。

这里并没有直接在设置 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("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，

而结果来看，字小图大加留白好像反而有些精细的感觉，也解决了上面方法 PC 端字超大的问题。

另外，如果使用此类方法，那么 @media 划分屏宽节点就得靠 rem 了哟，比如淘宝用的 10rem。

最后，再讲一个比较奇葩但又很有效的响应式方法。

有没有感觉到一股我不管我不听的倔强气息，这种方法意味着，不管设备怎样，我只当设备是 750px 视图大小的设备。

375px 就是半个屏幕，这对做应用场景 H5 的小伙伴可谓是福音，做雪碧图用 px 定位什么的才是最爽的，

但它也有着它的坏处，也就是设备的宽高比是不定的，比如 iPhone4 和 iPhone5 一样宽但高度短一截，所以最好再加上一个上下居中的解决办法。

感谢你能够认真阅读完这篇文章，希望小编分享的“web开发中有哪些响应式文字”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站建设公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。