1,pxTorem.js
export default function resizeRem() {
var deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
var fontsize = null;
if (deviceWidth > 1920) {
deviceWidth = 1920;
fontsize = deviceWidth / 19.2 + 'px';
} else {
fontsize = deviceWidth / 7.5 + 'px';
}
document.documentElement.style.fontSize = fontsize;
// 禁止双击放大
// document.documentElement.addEventListener('touchstart', function (event) {
// if (event.touches.length > 1) {
// event.preventDefault();
// }
// }, false);
// var lastTouchEnd = 0;
// document.documentElement.addEventListener('touchend', function (event) {
// var now = Date.now();
// if (now - lastTouchEnd <= 300) {
// event.preventDefault();
// }
// lastTouchEnd = now;
// }, false);
window.onresize = function () {
resizeRem()
}
}
2, main.js 中 引入
import resizeRem from './utils/pxTorem'
resizeRem();
3, 使用: 设计稿是375的,如果width为40,则为40/100 *2 = 0.8rem