• 动态设置html的font-size值


    PC端

    (function () {
        function setRootFontSize() {
            let rem, rootWidth;
            let rootHtml = document.documentElement;
            //限制展现页面的最小宽度
            rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
            // 19.2 = 设计图尺寸宽 / 100( 设计图的rem = 100 )
            rem = rootWidth / 19.2;
            // 动态写入样式
            rootHtml.style.fontSize = `${rem}px`;
        }
        setRootFontSize();
        window.addEventListener("resize", setRootFontSize, false);
    })();
    

    移动端

     (function () {
        function setRootFontSize() {
            let dpr, rem, scale, rootWidth;
            let rootHtml = document.documentElement;
        
            dpr = window.devicePixelRatio || 1; //移动端必须设置
            //限制展现页面的最小宽度
            rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
            rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100(设计图的rem = 100)
            scale = 1 / dpr;
        
            // 设置viewport,进行缩放,达到高清效果 (移动端添加)
            let vp = document.querySelector('meta[name="viewport"]');
            vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
        
            // 动态写入样式
            rootHtml.style.fontSize = `${rem}px`;
        }
        setRootFontSize();
        window.addEventListener("resize", setRootFontSize, false);
        window.addEventListener("orientationchange", setRootFontSize, false); //移动端
    })();
    

    相关文档: http://www.aliued.com/?p=3166

  • 相关阅读:
    QPushButton设置背景图片,设置背景透明度
    QMessageBox 弹窗提示总结
    Qt中 QObject * sender() const的用法
    Java获取文件后缀
    Qt QLabel设置背景色
    Qt 设置程序图标
    程序猿 tensorflow 入门开发及人工智能实战
    Github + Hexo 搭建博客
    Linux常用命令
    深度学习路线记录
  • 原文地址:https://www.cnblogs.com/guojiabing/p/10783875.html
Copyright © 2020-2023  润新知