Mobile-side adaptation in Vue development (PX converted to VW)

1. Under the project root directory, create the. postcssrc.js file.

2. Install the plugin.

- D (development dependent)

Postcss-import

Postcss-url

cssnano-preset-advanced

- s (both development and operation dependent)

Postcss-aspect-ratio-mini

Postcss-px-to-viewport
Postcss-write-svg
Postcss-cssnext
Cssnano
Postcss-viewport-units

3. Configuration. 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,  //width of the window, corresponding to the width of our design, generally        viewportheight:1334,//window height, according to the width of the 750 device to specify, generally specify 1334, You can also not configure        Unitprecision:3,       //Specify ' px ' to convert to the number of decimal digits of the window unit value (not divisible in many cases)        viewportunit: ' VW ',     //Specify the window unit to be converted to, It is recommended to use the VW        selectorblacklist: ['. Ignore ', '. Hairlines '],  //Specifies a class that does not convert to a Windows unit, can be customized, can be added infinitely, and recommends defining one to two generic class names        Minpixelvalue:1,       //less than or equal to ' 1px ' does not convert to Windows units, you can also set the value you want        mediaquery:false       //Allow to convert ' 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 style: ( Uniform width than default property)

[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 handles the side effects of using viewport Units Buggyfill and requires the following settings img*/img {  content:normal!important;}

For example: Want a 750:250 scale container, the code in the HTML:

<div class= "banner" w-750-250 aspectratio aspect-ratio= "750/250" >      <div         aspectratio-content>       

It corresponds to the CSS style:

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

5.VW compatible processing (some phones do not support VW units)　　

　　The following JS file is introduced in the index.html of the 5.1 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. Instead of using the Viewport-units-buggyfill in the 5th way, I introduced it using the NPM installation method.

6.1 NPM Install Viewport-units-buggyfill-s

6.2 Entries in the entry file (e.g. Main.js), introduced:

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

　　

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

This article is just a summary of learning and practice. Plug-ins do not have to be installed, according to the actual project needs, self-determination.

Mobile-side adaptation in Vue development (PX converted to VW)