css字号 h5_H5页面中字体大小动态配置

  • Post author:
  • Post category:其他


html 元素是文档的根元素,对html设置了字体大小,其子元素会继承html字体的大小。

不同的浏览器默认有的默认html的字体是16px,有的是14px。

同时浏览器字体的大小还会受到你自己在手机里配置的系统字体大小的影响。

这么多因素,如果只靠css里配置html字体大小,子元素基于html的rem是不能保证在不同的手机端适配的。

所以可以通过js动态来计算html应该配置多大的字体。

function htmlFontSize() {

var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

var width = w > h ? h : w;

width = width > 720 ? 720 : width;

var fz = ~~(width * 100000 / 36) / 10000/2;

document.getElementsByTagName(“html”)[0].style.cssText = ‘font-size: ‘ + fz + “px”;

var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName(“html”)[0]).fontSize.replace(‘px’, ”) * 10000) / 10000;

if (fz



版权声明:本文为weixin_29972227原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。