A Mobile Terminal-PC Terminal Adaptation Scheme


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

Recommended Today

Oracle (PLSQL) introduction 1

Oracle installation, user authorization, table operation, data type, DDL table, DML data. Next: Oracle introduction 2 Learning video: https://www.bilibili.com/video/BV1tJ411r7EC?p=15 Baidu cloud installation package is attached to the installation tutorial: https://blog.csdn.net/qq_ 40774525/article/details/79919057 Oracle Baidu cloud installation package: https://pan.baidu.com/s/1qVWwCUR37j2JxEecYbe5HQ Extraction code: 5abz After the Oracle service above is installed, open the client of SQL developer and the […]