加粗样式
1. 开发环境安装
npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装淘宝镜像
cnpm install --global vue-cli
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev
2.使用rem 布局,安装flexible
npm i lib-flexible --save
3.在main.js引入lib-flexible
import 'lib-flexible'
4.添加根目录index.html中添加meta标签
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
5.将px转rem 安装px2rem-loader
npm i px2rem-loade --save-dev
6.配置px2rem-loader build/utils.js
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 100
}
}
function generateLoaders(loader, loaderOptions) {
var loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
}
7.使用px2rem外部引用css时没有将px 转为rem,所以需要 在node_modules
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width /7.5; //将10改为7.5
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
这样设置完。外部css要使用1re100px,内部直接使用px自动编译