自适应实用方法

最新推荐文章于 2020-08-28 15:05:27 发布

付博瀚

最新推荐文章于 2020-08-28 15:05:27 发布

阅读量850

点赞数

分类专栏：前端文章标签： js 前端

本文链接：https://blog.csdn.net/fu415037685/article/details/80677443

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

网页设计最常用的单位是px,与之相对应的rem，能够对设置好的宽高进行自适应，所以在网页显示上面应该找准body上面设置字体等的px,以用来应付单位大小。
下面是根据屏幕宽度自适应设置字体大小的js

    (function() {
        setFontSize();
        function setFontSize() {
            var html = document.documentElement;
            var windowWidth = html.clientWidth;
            if(windowWidth <= 750) {
                html.style.fontSize = windowWidth / 7.5 + 'px';
            } else {
                html.style.fontSize = '100px';
            }
        };
        window.onresize = setFontSize;
    })();