移動(dòng)端適配問題

在head中設(shè)置：

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />

javascript

window.addEventListener('onorientationchange', setRem);
window.addEventListener('resize', setRem);
setRem();
function setRem() {
    var html = document.querySelector('html');
    var width = html.getBoundingClientRect().width; // 視口寬度
    html.style.fontSize = width / 16 + 'px'; // 1rem = width / 16
}

樣式寫法：

// sass寫法換算一下rem
@function rem($px) {
  @return $px / 46.875 + rem
}

//這里樣式
.demo {
  width: rem(300);
  height: rem(300);
  background: red;
}