美文网首页
使用jq开发pc网页时,自适应解决方案

使用jq开发pc网页时,自适应解决方案

作者: 嵩鼠 | 来源:发表于2021-07-27 09:48 被阅读0次
    /* 自适应 */
    function basefont() {
        var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
        var wH = window.innerHeight; // 当前窗口的高度
        var wW = window.innerWidth; // 当前窗口的宽度
        var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        rem = rem > 100 ? 100 : rem;
        $('html').css('font-size', rem + "px");
    }
    
    // 当DOM结构加载完成后自动执行此函数,并且调用适配函数
    document.addEventListener('DOMContentLoaded', () => {
        this.basefont()
    }, false);
    
    // 当页面变化时候触发此函数,并且重新调用适配函数
    $(window).resize(function() {
        this.basefont()
    });
    
    
    • 使用默认100像素值是为了好算,比如,设计稿定义一个盒子宽135px,直接设置width:1.35rem即可;不需要额外单独换算。
      一个比较简单的适配方案。大伙们应该都懂,特此记录,方便使用jq开发网页时直接复制使用。

    相关文章

      网友评论

          本文标题:使用jq开发pc网页时,自适应解决方案

          本文链接:https://www.haomeiwen.com/subject/iagnmltx.html