前端开发的适配方案

rem
1rem 的大小就是 html 设置的 font-size 的大小
开发环境浏览器移动端宽度375，设计稿750，要实现750设计稿中1rem=100px，375的代码中设置1rem=375/750 * 100 + ‘px’
手写一个rem适配

// 封装一个根据屏幕尺寸自动改变html的font-size大小的函数
function rem() {
  //  获取html的宽度
  let htmlW = document.documentElement.clientWidth;
  // 获取body的宽度
  let bodyW = document.body.clientWidth;
  // 兼容处理
  let W = htmlW || bodyW;
  // 设置html的font-size大小
  // 因为设计图尺寸是750，所以平分，这样*100之后，1rem就等于100px;
  document.documentElement.style.fontSize = (W / 750 * 100) + 'px';
}
 
// 定义屏幕宽度改变时触发
window.onresize = function () {
  rem()
}
 
// 设置初始触发一次
rem()