移动端适配问题

移动端适配问题

在head中设置：

<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;
}