移动端屏幕适配——简单适配方案

最新推荐文章于 2024-08-01 16:35:03 发布

转载最新推荐文章于 2024-08-01 16:35:03 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rickdiculous/p/11564437.html

本文介绍了一种使用JavaScript动态调整html字体大小的方法，通过设置根元素的字体大小为视窗宽度的一定比例，实现字体大小随屏幕大小变化而变化，适用于响应式网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html字体大小随屏幕大小的改变而改变，封装函数如下：

(function(){
    'use strict';
    
    setRemUnit();
    window.addEventListener('resize',setRemUnit);
    function setRemUnit(){
        var docEl = document.documentElement;
        var ratio = 18.75;
        var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
        docEl.style.fontSize = viewWidth / ratio + 'px';
    }
})();