使用jq开发pc网页时,自适应解决方案
2021-07-27 本文已影响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开发网页时直接复制使用。