码迷,mamicode.com
首页 > 移动开发 > 详细

vue 项目移动端 PC端自适应

时间:2020-09-17 12:21:52      阅读:44      评论:0      收藏:0      [点我收藏+]

标签:uil   dev   fun   自适应   插件   name   com   淘宝   main   

一、安装淘宝插件   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

 

vue 项目移动端 PC端自适应

标签:uil   dev   fun   自适应   插件   name   com   淘宝   main   

原文地址:https://www.cnblogs.com/zhaohui-116/p/13609107.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!