1、在assets中建立js文件,新建rem.js文件,將計(jì)算rem方法寫入rem.js文件當(dāng)中
如750設(shè)計(jì)稿 rem.js文件為
(function(doc, win) {
? ? ? ? var docEl = doc.documentElement,
? ? ? ? ? ? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
? ? ? ? ? ? recalc = function() {
? ? ? ? ? ? ? ? var clientWidth = docEl.clientWidth;
? ? ? ? ? ? ? ? if (!clientWidth) return;
? ? ? ? ? ? ? ? if (clientWidth >= 750) {
? ? ? ? ? ? ? ? ? ? docEl.setAttribute('style','font-size:100px !important');
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? docEl.setAttribute('style','font-size:'+100*(clientWidth / 750) + 'px !important');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? if (!doc.addEventListener) return;
? ? ? ? win.addEventListener(resizeEvt, recalc, false);
? ? ? ? doc.addEventListener('DOMContentLoaded', recalc, false);
? ? })(document, window);
2、將rem.js 用 import引入 main.js當(dāng)中
3、安裝cnpm px2rem-loader -D
4、在.util.js 修改
const px2remLoader = {
? ? loader: 'px2rem-loader',
? ? options: {
? ? ? remUnit: 100??
? ? }
? };
const cssLoader = {
? ? loader: 'css-loader',
? ? options: {
? ? ? sourceMap: options.sourceMap,
? ? ? importLoaders: 2
? ? }
? }
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
配置完成,重新啟動