Vue.js 移动端适配之 vw 解决方案

golden_hamster 发布于2019-08-29 16:36 / 1689人阅读

摘要：安装并配置插件还需要安装对进行配置找到在根目录中的，对插件进行配置视窗的宽度，对应的是我们设计稿的宽度，一般是视窗的高度，根据设备的宽度来指定，一般指定，也可以不配置指定转换为视窗单位

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

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.js 添加 postcss-px-to-viewport 的 exclude 选项

"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, // 视窗的宽度，对应的是我们设计稿的宽度，一般是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 解决方案

GPU云服务器云服务器移动端适配方案移动端适配移动端适配 js 移动适配

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113853.html

移动端适配方案

摘要：业务环境是决定整体项目的适配方案的核心因素。而淘宝的主站和类似，分为移动端页面和端页面，端页面同样有着左右的留白，这也是为了让用户能够在宽屏的时候将注意力集中在中间区域。移动端适配方案移动端适配方案是一个老生常谈的话题，但是对于不同的项目、不同的业务场景可能会需要不同的适配方案来进行移动端适配，向下兼容的baseline也需要提前订好。整体宽高其实移动端适配就和下面的玩具一样，...

feng409 2019-08-30 15:54 评论0 收藏0
茴字的四种写法—移动适配方案的进化

摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

canger 2019-08-22 16:12 评论0 收藏0
茴字的四种写法—移动适配方案的进化

摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

Pocher 2019-08-02 10:10 评论0 收藏0
茴字的四种写法—移动适配方案的进化

摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

MockingBird 2019-08-30 15:53 评论0 收藏0
不要再问我移动适配的问题了

摘要：不要再问我的问题系列一不要再问我的指向问题了二不要再问我跨域的问题了移动端适配的问题，一般来说我们都不会去深究，因为这种东西都是配置一次就再也不用管的了，接到设计图就按照祖传套路撸就完事了。不要再问我XX的问题系列：一、不要再问我this的指向问题了二、不要再问我跨域的问题了移动端适配的问题，一般来说我们都不会去深究，因为这种东西都是配置一次就再也不用管的了，接到设计图就按照祖传...

Airy 2019-08-30 15:55 评论0 收藏0