JavaScript监听窗口尺寸变化调整根元素的字体大小,实现的自适应布局方案
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍使用JavaScript监听窗口尺寸变化调整根元素的字体大小,实现的自适应布局方案。适用于移动端网页开发。 designWidth为开发测试的页面宽度,deviceWidth为当前页面的宽度,根据设置页面元素根元素的px大小，然后所有rem以此为基准。

主要js

<script>
    var designWidth = document.getElementsByTagName("head")[0].getAttribute("design-width");
    font_size(designWidth);
    function font_size(devwidth) {
        function _size() {
            var deviceWidth = document.documentElement.clientWidth;
            if (deviceWidth >= devwidth) deviceWidth = devwidth;
            document.documentElement.style.fontSize = deviceWidth / (devwidth / 100) + 'px';
        }
        _size();
        window.onresize = function () {
            _size();
        };
    }  
</script>