A Mobile Terminal-PC Terminal Adaptation Scheme

Time:2019-10-9

This time we adopted the most common REM adaptation scheme

Don’t talk nonsense, first look at the final adaptation effect:

Mobile looks like this:

A Mobile Terminal-PC Terminal Adaptation Scheme

PC looks like this:

A Mobile Terminal-PC Terminal Adaptation Scheme

Well, it’s OK. Look at it.

Start, install first

Of course, first install amfe-flexe, recommend NPM

npm i amfe-flexible -S

Then it is introduced at the project entrance.

import 'amfe-flexible'

If you don’t want to use npm, introduce it with this script

<script />

Unit Conversion

In order to be consistent with the design draft PX unit, a PX to REM tool is also needed to help.

npm i postcss-pxtorem -D

Configure the postcss plug-in of webpack

"postcss": {
  "plugins": {
    "postcss-pxtorem": {
      "RootValue": 37.5, // / Here you can customize it according to the width of the design draft. Common 37.5 or 75
      "propList": [
        "*"
      ]
    }
  }
}

In this way, we can use PX units directly without converting rem.

Small adaptation

Although the mobile side is normal, browsers find that the proportion is too large, so we have to ask PC to retract for me.

A Mobile Terminal-PC Terminal Adaptation Scheme

The idea is relatively simple, with media queries, the large screen will reset the root font, give a maximum zoom width.

@media screen and (min-width: 750px) {
  html {
    Font-size: 100px! Important; // Here weighted weight is because amfe-flexible sets the root font through in-line style
  }

  body {
    Max-width: 500PX; // Incidentally, there can also be lowercase px, capitalization PX can make postcss-pxtorem ignore into REM
    margin: 0 auto;
  }
}

Be it so