Vue.js 移動(dòng)端適配之 vw 解決方案

golden_hamster 發(fā)布于2019-08-29 16:36 / 1725人閱讀

摘要：安裝并配置插件還需要安裝對(duì)進(jìn)行配置找到在根目錄中的，對(duì)插件進(jìn)行配置視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，一般是視窗的高度，根據(jù)設(shè)備的寬度來指定，一般指定，也可以不配置指定轉(zhuǎn)換為視窗單位

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. 對(duì) PostCss 進(jìn)行配置

找到在根目錄中的.postcssrc.js，對(duì)PostCSS插件進(jìn)行配置

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, // 視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，一般是750
      viewportHeight: 1334, // 視窗的高度，根據(jù)750設(shè)備的寬度來指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無法整除）
      viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
      selectorBlackList: [".ignore", ".hairlines"], // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個(gè)通用的類名
      minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
      mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false, // 和cssnext同樣具有autoprefixer，保留一個(gè)
      "postcss-zindex": false
    }
  }
}

3. 引入viewport-units-buggyfill解決兼容問題

在 index.html 中引入js

4. 遇到的問題及解決方案

img圖片不顯示

全局引入CSS樣式

img { content: normal !important; }

與第三方UI庫兼容問題

我這里使用了 Element 的 Mint-UI，在編譯的過程中會(huì)出現(xiàn)這個(gè)錯(cuò)誤：

 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
新增對(duì)exclude選項(xiàng)的處理

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) {  // 添加對(duì)exclude選項(xiàng)的處理
        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.js 添加 postcss-px-to-viewport 的 exclude 選項(xiàng)

"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.js 配置 postcss-px-to-viewport-opt

"postcss-px-to-viewport-opt": {
  viewportWidth: 375, // 視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，一般是750
  viewportHeight: 1334, // 視窗的高度，根據(jù)750設(shè)備的寬度來指定，一般指定1334，也可以不配置
  unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無法整除）
  viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
  selectorBlackList: [".ignore", ".hairlines"], // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個(gè)通用的類名
  minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
  mediaQuery: false, // 允許在媒體查詢中轉(zhuǎn)換`px`
  exclude: /(/|)(node_modules)(/|)/
},

5. 參考資料

Vue+ts下的移動(dòng)端vw適配（第三方庫css問題）
再聊移動(dòng)端頁面的適配
如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配

原文地址：Vue.js 移動(dòng)端適配之 vw 解決方案

云服務(wù)器 GPU云服務(wù)器移動(dòng)端適配方案移動(dòng)端適配移動(dòng)端適配 js 移動(dòng)適配

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113853.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

golden_hamster

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 1873·2023-04-25 14:28
模擬信號(hào)|隔離器放大器|隔離變送器|4-20mA|0-5V|0-10V隔離|常見問題解答

閱讀 1906·2021-11-19 09:40
數(shù)據(jù)結(jié)構(gòu)：鏈表-C語言實(shí)現(xiàn)

閱讀 2809·2021-11-17 09:33
OBHost：萬圣節(jié)優(yōu)惠，新加坡vps/美國vps等，大硬盤VPS/游戲服務(wù)器/站群VPS七折，最低

閱讀 1395·2021-11-02 14:48
Vue.js 移動(dòng)端適配之 vw 解決方案

閱讀 1726·2019-08-29 16:36
Bootstrap 4重大更新，亮點(diǎn)解讀

閱讀 3344·2019-08-29 16:09
關(guān)于響應(yīng)式設(shè)計(jì)的一些關(guān)鍵點(diǎn)

閱讀 2928·2019-08-29 14:17
Web前端面試題目匯總

閱讀 2391·2019-08-29 14:07

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue.js 移動(dòng)端適配之 vw 解決方案

相關(guān)文章

移動(dòng)端適配方案

**茴字的四種寫法—移動(dòng)適配方案的進(jìn)化**

**茴字的四種寫法—移動(dòng)適配方案的進(jìn)化**

**茴字的四種寫法—移動(dòng)適配方案的進(jìn)化**

**不要再問我移動(dòng)適配的問題了**

發(fā)表評(píng)論

0條評(píng)論

golden_hamster

男|高級(jí)講師

TA的文章

tensorflow

模擬信號(hào)|隔離器放大器|隔離變送器|4-20mA|0-5V|0-10V隔離|常見問題解答

數(shù)據(jù)結(jié)構(gòu)：鏈表-C語言實(shí)現(xiàn)

OBHost：萬圣節(jié)優(yōu)惠，新加坡vps/美國vps等，大硬盤VPS/游戲服務(wù)器/站群VPS七折，最低