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

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

1. vscode安装cssrem插件;

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

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

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

日常开发中px单位自动转换为rem的方法插图(1)

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: 640px;
min-width: 320px;
font-family: Microsoft Yahei, Arial;
background: #f0f0f0;
font-size: 0.5rem;
margin: 0 auto !important;
/*滚动条卡顿*/
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » 日常开发中px单位自动转换为rem的方法

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活