zoukankan      html  css  js  c++  java
  • Vue项目屏幕自适应

    一、安装lib-flexible
    npm i lib-flexible -D

    二、在main.js中引入

    import 'lib-flexible/flexible'

    三、在index.html文件中设置meta标签:

      <meta name='viewport' content='width=device-width , initial-scale=1.0'>

    四、然后在项目中写css时会自动将rem转化为px,需要安装px2rem这个工具

    npm i px2rem-loader -D

    四、修改配置文件
    4.1有build文件夹
    /build/util.js:
    a、在cssLoader对象下面添加一个px2remLoader对象:

    const px2remLoader = {
        loader : 'px2rem-loader',
        options : {
          //这个参数是通过psd设计稿的  宽度 / 10 来计算,这里以750为标准
          remUnit : 75  
        }
      }

    b、然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader]

     const loaders = [cssLoader, px2remLoader]

    4.2 无build文件夹(使用了vue cli3或3以上版本)

    在项目根目录下新建vue.config.js文件

    const cssLoader = {
      loader: 'css-loader',
      options: {
        minimize: process.env.NODE_ENV === 'production',
        sourceMap: options.sourceMap
      }
    }
    // 新增px2remLoader
    const px2remLoader = {
      loader: 'px2rem-loader',
      options: {
        remUnit: 75
      }
    }
    
    function generateLoaders (loader, loaderOptions) {
      // 新增px2remLoader
      const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    
      if (loader) {
        loaders.push({
          loader: loader + '-loader',
          options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
          })
        })
      }
    }
    重新启动项目,即可自适应(单位使用px)
  • 相关阅读:
    Linux三剑客grep、awk和sed
    Appium元素定位(二):UiAutomator定位
    Appium元素定位(一)
    App控件定位
    Appium 介绍及环境安装
    android Mvp简单实用
    EventBus通信
    Activity关闭另一个Acitivity
    Android输入法 监听事件
    图片形状圆角
  • 原文地址:https://www.cnblogs.com/webljl/p/14009333.html
Copyright © 2011-2022 走看看