1.安装lib-flexible
npm i lib-flexible --save 2.在项目入口文件main.js中引入lib-flexible
3.在项目根目录的index.html 头部加入手机端适配的meta的代码
在实际的开发中,使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ,将px转换成rem,我们将使用px2rem这个工具, 它有webpack的loader: https://github.com/Jinjiang/px2rem-loader (这是px2rem-loader的github地址)
所以我使用了 github上面的安装命令:npm install px2rem-loader |
5.配置px2rem-loader
在vue-cli生成的webpack 配置中,vue-loader 的options和其他样式文件loader 最终都是由build/untils.js里的一个方法生成的。
我们只需要在cssLoader后面加上一个px2remLoader即可,px2rem-loader的remUnit 选项意思是1rem=多少像素,结合lib-flexible,我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10,这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
6.然后重启后 在组件中写单位直接写px 然后在浏览器中的检查就可以看到 单位是rem
1.安装lib-flexible
npm i lib-flexible --save 2.在项目入口文件main.js中引入lib-flexible
3.在项目根目录的index.html 头部加入手机端适配的meta的代码
在实际的开发中,使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ,将px转换成rem,我们将使用px2rem这个工具, 它有webpack的loader: https://github.com/Jinjiang/px2rem-loader (这是px2rem-loader的github地址)
所以我使用了 github上面的安装命令:npm install px2rem-loader |
5.配置px2rem-loader
在vue-cli生成的webpack 配置中,vue-loader 的options和其他样式文件loader 最终都是由build/untils.js里的一个方法生成的。
我们只需要在cssLoader后面加上一个px2remLoader即可,px2rem-loader的remUnit 选项意思是1rem=多少像素,结合lib-flexible,我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10,这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
6.然后重启后 在组件中写单位直接写px 然后在浏览器中的检查就可以看到 单位是rem