响应式自适应布局代码,rem布局

响应式自适应布局代码

首先是先设置根字体大小，PC端一般是16px为根字体，移动端会有不同的，根据情况来设置

js部分

    document.querySelector('html').style.fontSize = getFontSize();
//支持拉动屏幕大小时监听屏宽等比例缩放
    window.onresize = function () {
      document.querySelector('html').style.fontSize = getFontSize();
    }
    function getFontSize() {
      return (document.documentElement.clientWidth || document.body.clientWidth) / 120 + 'px';
        //这里1920/120=16px
    }

css文件

<style scoped lang="scss">
@function torem($px) {
  // $px为需要转换的字号
  @return $px / 16px * 1rem; //16px为根字体大小
}
//这个方法为了不用自己一个个去计算rem是多少，其实也可以自己算好rem直接写
 button {
    position: absolute;
    left: 50%;
    margin-left: torem(-33px);
    bottom: torem(20px);
    width: torem(67px);
    height: torem(50px);
  }
</style>