At present, there are generally two adaptation schemes for mobile terminals, one is REM scheme and the other is VW scheme. This paper is to explain how to use these two schemes to solve problems once and for all. Panda-vue-template builds vUE small Mall 2.0 by hand

1. On REM

  • remThe principle of what I will not say, online search a large number of articles.
  • Lib-flexibily.js is generally used, but this has been deprecated as an interim solution and is not recommended for your new project.
  • If you’re interested, check out this one I wrote a long time agoRem and Lib-flexible for mobile phone adaptationLet’s talk about how to use itvwTo solve the phone adaptation problem.

2. Install PostCSS

  • To implement usingvwTo achieve mobile adaptation, we need to install firstpostcss. Generally speaking:
$ npm i postcss-loader --save-dev
Copy the code
  • forpostcssI used to inWebpack from 0 to 1-less, sASS, postCSSAs I mentioned, you can think of it as aplatformThe concept of customization, there are many plug-ins developed for itFu canTo realizevwAdaptation takes advantage of a plugin:postcss-px-to-viewport, install it first:
$ npm install postcss-px-to-viewport --save-dev
Copy the code
  • It can set us uppxValues are automatically converted to the correspondingvw,vhAnd so on.

3, configuration,

  • If your project is up to datevue-cli3.xSo let’s connectpostcss-loderIt doesn’t have to be installed, it just uses it internally.
  • But I usually prefer to create a new postcss.config.js to configure the content, which is probably more straightforward.
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px'.viewportWidth: 750.unitPrecision: 3.propList: [The '*'].viewportUnit: 'vw'.fontViewportUnit: 'vw'.selectorBlackList: ['.ignore'].minPixelValue: 1.mediaQuery: false.replace: true.exclude: [].landscape: false.landscapeUnit: 'vw'.landscapeWidth: 568}}}Copy the code
  • The meanings of each parameter are as follows: postcss-px-to-viewport

4, summary

  • In fact, using VW to achieve mobile adaptation is relatively simple, the main is to usepostcss-px-to-viewportThis plugin.
  • That’s about it.

Reference link: juejin.cn/post/684490… Github.com/evrone/post… Cli.vuejs.org/zh/guide/cs…