Mobile adaptation in Vue development (px to vw)

1. In the project root directory, create a .postcssrc.js file.

2. Install the plugin.

-D (development dependencies)

postcss-import

postcss-url

cssnano-preset-advanced

-S (depending on development and running)

postcss-aspect-ratio-mini

postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

3. Configure .postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
        utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        viewportWidth: 750, //The width of the window, corresponding to the width of our design draft, generally 750
        viewportHeight: 1334, // The height of the window, specified according to the width of the 750 device, generally specify 1334, or not
        unitPrecision: 3, // Specify the number of decimal places to convert `px` to the viewport unit value (many times it is not divisible)
        viewportUnit: 'vw', // Specify the viewport unit to convert to, it is recommended to use vw
        selectorBlackList: ['.ignore', '.hairlines'], // Specify classes that are not converted to window units, can be customized, can be added infinitely, it is recommended to define one or two general class names
        minPixelValue: 1, // less than or equal to `1px` is not converted to viewport units, you can also set it to the value you want
        mediaQuery: false // allow converting `px` in media queries
      },
      "postcss-viewport-units":{},
      "cssnano": {
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      },
  }
}

4. In the style of the root component App.vue, add the following styles: (uniform width than the default attribute)

[aspectratio] {
  position: relative;
}
[aspectratio]::before {
  content: '';
  display: block;
  width: 1px;
  margin-left: -1px;
  height: 0;
}

[aspectratio-content] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
/* vm compatible to handle the side effects caused by using Viewport Units Buggyfill, you need to set img as follows */ 
img { content: normal !important; }

For example: if you want a 750:250 scale container, the code in html:

<div class="banner" w-750-250 aspectratio aspect-ratio="750/250">
     <div aspectratio-content>
        <img src="" alt="" width="100%" height="100%">
     </div>
</div>

Its corresponding css style:

[w-750-250] {
    width: 750px;
}
[w-750-250]{
    aspect-ratio:'750:250';
}

5. Compatible processing of vw (some mobile phones do not support vw units)　　

　　5.1 The following JS files are introduced into the index.html of the Vue project:　

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

　　5.2 Call viewport-units-buggyfill at the bottom of html

<script>
    window.onload = function () {
      window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
      });
</script>

6. I did not use the viewport-units-buggyfill method in point 5, but introduced it using the npm installation method.

　　6.1 npm install viewport-units-buggyfill -S

　　6.2 In the entry file of the project (such as main.js), introduce:

var hacks = require('viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
  hacks: hacks
});

Note: For detailed configuration instructions, you can read this good article https://www.w3cplus.com/mobile/vw-layout-in-vue.html.

This article is just a summary of learning and practice.

Mobile adaptation in Vue development (px to vw)

Guess you like