zoukankan      html  css  js  c++  java
  • vue-cli配置移动端自适应

    1、问题:vue开发中测试时发现适配有问题,找了一下资料,发现使用 lib-flexible 和 px2rem-loader将px转为rem;

    2、安装lib-flexible:npm install lib-flexible --save

       在项目入口文件main.js引入lib-flexible

    3、查看index.html中meta配置:<meta name="viewport" content="width=device-width, initial-scale=1.0">

    4、安装px2rem-loader:npm install px2rem-loader --save

    5、在build中utils中配置px2rem-loader:

      (1)、定义一个变量 px2remLoader:remUnit:值对应的是设计图图宽度的十分之(根据设计图更改)

    var px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 37.5
        }
      }

      (2)、在 generateLoaders 函数中更改 loaders

    var loaders = [cssLoader,px2remLoader]
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
          })
        }

    6、重启就可以看到 px 转换成 rem 了

  • 相关阅读:
    创建商品APP
    商品模块表结构分析
    sprintf 和 fprintf
    linux中sys目录
    linux中proc目录
    ioctl()函数
    ffmpeg下载安装
    【转】写给小白的实时音视频技术入门提纲
    linux常见目录解释
    linux nfs客户端开启失败解决办法
  • 原文地址:https://www.cnblogs.com/patriot/p/10114538.html
Copyright © 2011-2022 走看看