大屏等响应式 px 转为 rem 单位的使用

第一种方法 css3 calc 动态计算

前提 UI稿是1920*1080px 72px分辨率默认 在1920分辨率下 根字体 font-size 是100px 方便计算

// css中
html {
  /* 1920分辨率下 根字体是 100px */
  font-size: calc(100vw / 1920 * 10);
}
.title {
  font-size: 0.2rem // 对应 20px
}

第二种方法 js 动态设置

在页面初始化的时候调用

document.addEventListener('DOMContentLoaded', () => {
   const html = document.querySelector('html')
   html.style.fontSize = '100px'
})

// css中
.title {
  font-size: 0.2rem // 对应 20px
}