日常开发中px单位自动转换为rem的方法

青梅煮码

发布于 2023-02-18 16:11:55

1.1K0

发布于 2023-02-18 16:11:55

文章被收录于专栏：青梅煮码

开发工具： vscode css预处理器： less

1. vscode安装cssrem插件

https://qmblog.qmzm.co/2021/11/wz01-1-2-1.png

2. 修改css插件的默认配置

其默认转换px为16px, 需要改为当前项目设计的1rem所对应的px，vscode插件的默认安装目录一般为 C:Users用户名.vscodeextensions；找到 cipchk.cssrem-0.0.3 插件，打开package.json, 修改其默认配置：cssrem.rootFontSize

https://qmblog.qmzm.co/2021/11/wz02-2-1.png

3. 重启vocode,vscode的配置 4. 引入下面的js,监听窗口大小改变：

/** * 设置根字体大小 */
var docEl = document.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        if (docEl.clientWidth < 640 && docEl.clientWidth > 320) {
            docEl.style.fontSize = 32 * (docEl.clientWidth / 320) + 'px';
        } else if (docEl.clientWidth >= 640) {
            docEl.style.fontSize = '64px';
        } else if (docEl.clientWidth <= 320) {
            docEl.style.fontSize = '32px';
        }
    };
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);

5. 对body标签进行设置：

body {
    max - width: 640 px;
    min - width: 320 px;
    font - family: Microsoft Yahei, Arial;
    background: #f0f0f0;
    font - size: 0.5 rem;
    margin: 0 auto!important;
    /*滚动条卡顿*/
    -
    webkit - overflow - scrolling: touch;
    overflow - scrolling: touch;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ide