阅读 620

采用Rem适配大屏

需要为大屏在不同的设备上进行查看,但是在需求中有很多布局需要去设置具体的像素值,如果采用通常的百分比布局,无法满足需求,这个时候想到了移动端布局的解决方案rem.

rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

我们可以通过动态计算html跟标签的font-size大小来实现大屏的适配,具体实现代码如下:

const baseNumber = 100; // 获取相对好计算的基数

/**
 * 设置html节点fontSize值得大小,需要动态计算
 * @param {*} designWidth 设计稿大小
 */
export function setHtmlFontSize(designWidth = 1920) { // 设计稿宽度为1920,利用移动端rem的适配方案,动态修改html的值
    const clientWidth = document.documentElement.clientWidth;

    // 选取的是 1920 , * 100是为了防止浏览器默认行为,如果小于12px默认会处理为12px进行计算。在css中一定要除以100.
    var fontSize = clientWidth / (designWidth) * baseNumber; // 计算完毕后,在设计稿上量出的尺寸直接写入,只是把px换成rem即可,其他内部需要动态设置为px的可以乘这个基数(size * fontSize / 100 + 'px')
    var elHtml = document.getElementsByTagName('html')[0];

    // elHtml.style.fontSize = (fontSize > 80 ? 80 : fontSize < 50 ? 50 : fontSize) + 'px'; // 规定上限在80px,下限在50px,上下限值根据需求进行调整,也可以不进行调整。
    elHtml.style.fontSize = fontSize + 'px';
}

/**
 * 获取当前的实际像素
 */
export function getUnitRem(px) {
    if (typeof px === 'string') px = parseFloat(px);
    return (isNaN(px) ? 0 : px / baseNumber) + 'rem';
}
复制代码
文章分类
前端
文章标签