As front end personnel, in order to adapt to various models of computers, mobile phones, we are often inseparable from the screen resolution adaptation;

So how to do a good job of screen resolution adaptation, I summarized the following points:

1. Use AMFE-Flexible to convert PX to REM for different screen widths

First install amFE-Flexible and PostCSS-PX2REM dependency

npm install amfe-flexible -S
npm install postcss-px2rem -S
Copy the code

Then introduce it in main.js

import "amfe-flexible/index.js";
Copy the code

Finally, configure it in vue.config.js

module.exports = { css: { loaderOptions: { plugins: [require("postcss-px2rem")({// where 75 means your blueprint is 750px, if you remUnit for 1920px, then it saves 192Copy the code

When you see that PX is converted to REM, flexible is in effect

Where there is a pit:

<el-form ref="form" :model="form" label-width="80px"> <el-form-item label=" activity name "> <el-input v-model="form.name"></el-input> </el-form-item> </el-form>Copy the code

The defined style similar to label-width will not be calculated as REM. If it is also calculated as REM, its style can be modified through style penetration.

::v-deep(.el-form-item__label){ width: 80px ! important; }Copy the code

2. Multi-purpose percentage, viewpoint port, Flex layout, grid layout, etc

Using the inherited attributes of width and height, you can zoom in and out of the page view by using percentages.

The height (VH) and width (VW) of the viewport can be used to fill the entire viewable area with the content of the page;

Using Flex layout, grid layout can do elements in the center display, proportional distribution and so on.

3. Media query

After using these two methods, most screens can be adapted to,

If there are specific pages or resolutions that are not adapted, you can use media queries for special adaptation, such as:

@media screen and (max-width: 1400px) {width: 200px} @media screen and (max-width: 1400px) {width: 200px}Copy the code

4. How to verify

It’s a hassle for developers to find different resolutions to verify and debug one by one,

In Google’s case, you can select the resolution you need to adjust by clicking on the console, pressing the mobile debug button, and entering the resolution you want to debug at the top.

The above is my screen resolution adaptation experience, welcome to pay attention to my wechat public account and I communicate, I will reply in time! (Xinxin fire can raise the original)