vue mobile terminal responsive Design

Here I recommend two plug-ins  

postcss-pxtorem、amfe-flexible

1, postcss-pxtorem dynamic will be converted px rem units (px to rem), I suggest that you drag the window size you can see the effect oh.

// first install the 
yarn add postcss-pxtorem --dev

 

Use vue cli3 / vue cli4 created, there is a project under the root directory postcss.config.js , which opened about adding a line configuration

// Configure 
plugins: { 
    autoprefixer: {},
     'postcss-pxtorem' : { 
      rootValue: 37.5,    // this is converted px rem reference value, when the font is set 14px, 14px is displayed on a general purpose handset size. 
      propList: [ '*' ] 
    } 
  }

2, amfe-flexible design page response

// install 
Yarn the Add amfe- flexible 

// main.js introduced 
import 'amfe-flexible'

Then, you can use the px units on a page, can automatically adapt the phone side.