我用HTML5做手机网页，如何设置字体大小以适合各种设备？

html-css020

我用HTML5做手机网页，如何设置字体大小以适合各种设备？,第1张

一般你在用电脑做手机网页的时候，浏览器显示的比例和手机的比例为50%，就是说你在浏览器上面正常的内容在手机上只有50%的整体大小适配，所以说在浏览器做调试的时候把预览图缩小50%，然后调试各种属性的大小，显示正常后放到手机上就完美了

手机响应式布局，是获取屏幕尺寸，在某个区间用一种css，另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。

而<meta name="viewport" content="width=device-width" />的用法是随着屏幕的大小，自动把页面自适应到屏幕的大小。这个是管用的。

em是字体的宽度，也就是一个字体宽12px，那么em=12px；字体为15px，em=15px；一般用来动态控制字体外的区块大小去适应字体，而不是用来设置字体的大小的。例如：

<p style="width: 12em">

    <!-- / 无论这里设置的字体多大，宽度只会容纳12个字 / -->

</p>

如果<meta name="viewport" content="width=device-width" />没效果，建议你用图片贴出来，看看你想要的具体效果是什么。

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

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

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

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

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

<script>

    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 !== realfz) {

            document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px"

        }

    }

    htmlFontSize()

    </script>

在js计算出html的字体大小以后，就可以在这个基础上配置各子元素的字体大小了。

html的字体大小设置为font-size100px原因:

html{font-size:100px}

h1{font-size: 0.16rem//100*0.16=16px }

.cc{font-size:0.14rem//14px}

又为什么要把html的font-size设置成50px:

因为设备像素比有2的，还有3的，我们按照设备像素比是2的开发，如果html{font-size:50px}那么设计稿ui中得头部header的高度是86px:height:0.86rem.(即：50px*0.86rem=43px，那么到了设备像素比是2的设备上，header的高度就是86px)这样就省去了除以2的计算。