开发移动端的初始化尺寸(rem)

// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
  @return ($px / $vw_fontsize / 2) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
  font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
  // 同时,通过Media Queries 限制根元素最大最小值
  @media screen and (max-width: 300px) {
    font-size: 64px;
  }
  @media screen and (min-width: 750px) {
    font-size: 108px;
  }
}

页面内调用

width: rem(527);
 height: rem(804);

你可能感兴趣的:(开发移动端的初始化尺寸(rem))