How to do mobile adaptation

Adaptation plan one: rem+dynamic font-size implementation

 Question 1: How to set different font-sizes of HTML for different screens

   m. Use media queries to set the font-size size of screen html in different size ranges

  m. JS dynamic calculation

   1. Calculate the font-size based on the width of the html and set it to the html

   2. Monitor real-time changes in page width and reset font-size to html

 m. Use lib-flexible library

// Install first
npm i -S amfe-flexible

//Reference at the page
<script src="./node_modules/amfe-flexible/index.js"></script>

Question 2: Convert the original size to be set into rem units.

•            Using postcss-pxtorem plugin 

•   02. 在postcss.config.js中配置
  module.exports = {
    plugins: [
      require('postcss-preset-env'),
      // 使用这个插件
      require('postcss-pxtorem')({
        rootValue: 37.5, // 设计稿宽度的1/10
        propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        exclude: /node_modules/i // 忽略的文件
      })
    ]
  };

  In this way, we can just write px directly on the page, and it will be changed automatically after packaging.

• 2. Use VSCode plug-in: px to rem plug-in, a conversion prompt will pop up 

Adaptation plan two: vw adaptation (relative to the screen viewport size, screen width = 100vw)

Using vw, there is no problem 1 of rem, only problem 2! ! !

npm install postcss-px-to-viewport -D

Configure in postcss.config.js

2. Use VSCode plug-in: px to rem plug-in