vue 项目移动端 PC端自适应

时间:2020-09-17 12:21:52   收藏:0   阅读:8

一、安装淘宝插件   lib-flexible  

npm i -S amfe-flexible

main.js中引入  import ‘lib-flexible‘ 

 

index.html的头部加入手机端适配的meta代码(以下二选一)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

 

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">

二、安装  px2rem-loader 

npm install px2rem-loader -S

在build 下的 utils.js 的 exports.cssLoaders 中配置

const px2remLoader = {
    loader: ‘px2rem-loader‘,
    options: {
      remUnit: 144  // 设计图的1/10
} }

在 function generateLoaders (loader, loaderOptions)  中修改

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

 

在项目中,px 会自动转换为 rem

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!