vue移动端配置flexible实现rem布局

最新推荐文章于 2022-11-02 11:54:03 发布

原创最新推荐文章于 2022-11-02 11:54:03 发布 · 738 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #app

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

移动端

1 篇文章

订阅专栏

博客介绍了在Vue移动端配置flexible实现rem布局的方法，涵盖Vue2和Vue3。包括安装依赖、引入lib-flexible、配置px2rem-loader等步骤，完成后书写CSS并在检查元素里切换到移动端调试，可看到相应变化。

vue移动端配置flexible实现rem布局

vue2

安装依赖

-D 等同于--save-dev    开发依赖
-S 等同于--save       项目必须的依赖(一个要打包到生产环境的安装包)

npm i lib-flexible --save-dev

npm install px2rem-loader --save-dev

引入lib-flexible

import 'lib-flexible/flexible'

配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

在generateLoaders方法中添加px2remLoader

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

完成

vue3

    //配置依赖
    npm i lib-flexible --save-dev
    npm i postcss-px2rem --save-dev
    
    // 在main.js里面引入
    import 'lib-flexible/flexible'
    
    //然后在vue.config.js 中配置
    css: {
    loaderOptions: {
      postcss: {
        // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75
          })
        ]
      }
    }
  }

完成

以上完成之后便可以在书写css，在检查元素里面。改变成移动端调试。可以看到相应的变化。

如下

html及css

<template>
  <div class="jd-sub">
    <div class="en">
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{

    }
  }
}
</script>

<style scoped lang='less'>
  .en{
    width: 100px;
    height: 100px;
    background: red;
    margin: 0 auto;
  }

</style>