移动端——处理rem根字体-优快云博客

本文介绍了一种在前端开发中实现响应式布局的方法，通过动态调整根元素字体大小实现不同屏幕尺寸下的适配，并提供了Sass函数pxTorem帮助px单位向rem单位的转换。

在入口js文件写入以下方法：

/*处理rem根字体 start*/

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
/*处理rem根字体 end*/

引入公用css

$browser-default-font-size: 16px !default;
@function pxTorem($px) {
  //$px为需要转换的字号
  @if (unitless($px)) {
    @return pxTorem($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / $browser-default-font-size) * 1rem;
}

在使用时直接

.title {           
　　margin-bottom: pxTorem(18);
　　padding: 0 pxTorem(20);

　　img {
　　　　height: pxTorem(31);
　　　　width: pxTorem(31);
　　}
}

按照常规UI设计图时，如果是px单位，传到pxTorem的除以2，pt单位时，直接按照原来的数值即可