移动端适配问题
在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;
}