Vue.jsモバイル端末に適したvwソリューション

5218 ワード

1.PostCssプラグインのインストールと構成

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

cssnano-preset-advancedのインストールも必要です
npm i cssnano-preset-advanced --save-dev

2.PostCssの構成


ルートディレクトリにある.postcssrc.jsを見つけて、PostCSSプラグインを構成します.
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-write-svg": {
      uft8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, //      ,            ,   750
      viewportHeight: 1334, //      ,  750        ,    1334,      
      unitPrecision: 3, //   `px`             (        )
      viewportUnit: 'vw', //             ,    vw
      selectorBlackList: ['.ignore', '.hairlines'], //             ,     ,      ,             
      minPixelValue: 1, //      `1px`        ,            
      mediaQuery: false //           `px`
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false, //  cssnext    autoprefixer,    
      "postcss-zindex": false
    }
  }
}

3.viewport-units-buggyfillを導入して互換性の問題を解決する

index.htmlにjsを導入


  window.onload = function () { 
    window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
  }

4.問題と解決策

  • imgピクチャは
  • を表示しない
    グローバル導入CSSスタイル
    img { content: normal !important; }
  • サードパーティUIライブラリとの互換性に関する問題
  • ここではElementのMint-UIを使用していますが、コンパイル中にこのエラーが発生します.
     warning  in ./node_modules/mint-ui/lib/style.css
    
    (Emitted value instead of an instance of Error) postcss-viewport-units: /Users/Wyj/Workspace/imglive/wx/node_modules/mint-ui/lib/style.css:267:1: '.mint-cell-allow-right::after' already has a 'content' property, give up to overwrite it.
    
     @ ./node_modules/mint-ui/lib/style.css 4:14-118 13:3-17:5 14:22-126
     @ ./src/plugins/mint-ui/index.js
     @ ./src/plugins/index.js
     @ ./src/main.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
    postcss-px-to-viewportは自己修正可能
    node_modulesではpostcss-px-to-viewportが見つかり、index.jsを開いてexcludeオプションの処理を追加します.
    module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
    
      var opts = objectAssign({}, defaults, options);
      var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit);
    
      return function (css) {
    
        css.walkDecls(function (decl, i) {
          if (options.exclude) {  //    exclude     
            if (Object.prototype.toString.call(options.exclude) !== '[object RegExp]') {
              throw new Error('options.exclude should be RegExp!')
            }
            if (decl.source.input.file.match(options.exclude) !== null) return;
          }
          // This should be the fastest test and will remove most declarations
          if (decl.value.indexOf('px') === -1) return;
    
          if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;
    
          decl.value = decl.value.replace(pxRegex, pxReplace);
        });
    
        if (opts.mediaQuery) {
          css.walkAtRules('media', function (rule) {
            if (rule.params.indexOf('px') === -1) return;
            rule.params = rule.params.replace(pxRegex, pxReplace);
          });
        }
    
      };
    });
    .postcssrc.jspostcss-px-to-viewportexcludeオプションを追加します.
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false,
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },

    あるいは改良版のpostcss-px-to-viewport-optを使用する
    npm install postcss-px-to-viewport-opt -S

    そして.postcssrc.jspostcss-px-to-viewport-optを配置する
    'postcss-px-to-viewport-opt': {
      viewportWidth: 375, //      ,            ,   750
      viewportHeight: 1334, //      ,  750        ,    1334,      
      unitPrecision: 3, //   `px`             (        )
      viewportUnit: 'vw', //             ,    vw
      selectorBlackList: ['.ignore', '.hairlines'], //             ,     ,      ,             
      minPixelValue: 1, //      `1px`        ,            
      mediaQuery: false, //           `px`
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },

    5.参考資料


    Vue+tsの下の移動端vw適合(サードパーティライブラリcss問題)移動端ページの適合について、Vueプロジェクトでvwを使用して移動端適合を実現する方法について説明します.
    原文アドレス:Vue.jsモバイル端末に適したvwソリューション