美文网首页
使用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