響應式自適應佈局代碼,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>