使用framework7 vue 配置px转vw的两种情况

最新推荐文章于 2024-10-12 11:48:12 发布

原创最新推荐文章于 2024-10-12 11:48:12 发布 · 670 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 3 个专栏收录

16 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

framework

1 篇文章

订阅专栏

本文详细介绍了在使用Framework7 Vue项目中如何配置vw单位，包括通过.postcssrc.js文件和在webpack.dev.js中手动引入'postcss-px-to-viewport'插件的方式，以及具体参数设置。

使用framework7 vue 配置vw问题：

framework7 vue有不同的模板。

其中一种是有.postcssrc.js文件。类似vue自动生成的，那么直接

"plugins": {

    "postcss-import": {},

    "postcss-url": {},

    "postcss-aspect-ratio-mini": {},

    "postcss-write-svg": {

      utf8: false

    },

    "postcss-cssnext": {},

    "postcss-px-to-viewport": {

      viewportWidth: 750, // (Number) The width of the viewport. 

      viewportHeight: 1334, // (Number) The height of the viewport. 

      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 

      viewportUnit: 'vw', // (String) Expected units. 

      selectorBlackList: ['.ignore', '.hairlines', '.page-shadow-effect'], // (Array) The selectors to ignore and leave as px. 

      minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 

      mediaQuery: false, // (Boolean) Allow px to be converted in media queries. 

      // exclude: /(\/|\\)(node_modules)(\/|\\)/

    },

    "postcss-viewport-units": {

      filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1

    },

    "cssnano": {

      // preset: "default",

      preset: "advanced",

      autoprefixer: false,

      "postcss-zindex": false

    }

  }

另外一种是没有.postcssrc.js，那么在webpack.dev.js添加以下，手动引入“postcss-px-to-viewport”：

options: {

                     plugins: (loader) => [

                         require('postcss-px-to-viewport')({

+                            // viewportWidth: 750, //根据视觉稿的宽度进行设置

+                            // viewportHeight: 1334,

                             viewportWidth: 750, //根据视觉稿的宽度进行设置

                             viewportHeight: 1334,

                             unitPrecision: 5,

                             viewportUnit: 'vw',

-                            selectorBlackList: [], //忽略转换的css选择器

+                            selectorBlackList: ['.ignoreDiv', '.ignoreRem'], //忽略转换的css选择器

                             minPixelValue: 1,

                             mediaQuery: false

                         }),