Vue project mobile terminal adaptation - rem

To adapt the mobile terminal, we need to consider how to dynamically change the width, height and font size of all boxes in the page layout for different sizes of mobile phone screens.

We can use the relative unit rem for this problem.

So what is rem?

rem (font size of the root element) refers to the unit relative to the font size of the root element. Simply put it is a relative unit. Set the font-size attribute of html, and rem dynamically changes the size of elements using rem units in the entire project according to its size.

For example: we set the font size of the root element to 37.5, and then if there is a box with a width of 75px, then we can set the box to 2rem.

Then, what we have to do next is to dynamically change the font-size of the root element according to the screen size

For example, there is a box with a width and a height of 2rem. When displaying on a small screen, we set the font-size to 37.5. Then what this box shows is a square of 75px * 75px. When displaying on a large screen, we set the font-size to 75px, then the box is displayed as a square of 150px by 150px.

With the above basic concepts, let's get to the topic.

First, introduce the css to rem plug-in in the project

npm i postcss-pxtorem -D

Create a new .postcssrc.js configuration file in the project root directory, the configuration code is as follows:

module.exports = {
    plugins: {
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 37.5, // 设计稿宽度的1/10
            "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
}

With this, we don't have to manually calculate how many px need to be written into rem every time. For example, the width of the design draft we got is 375px (the rootValue of the above code is written as 37.5), and there is a square of 375px*375px inside. We can just write 375px directly, this plugin will automatically calculate the width and height for us to be 10rem

So, how to dynamically change the font size of the root element?

Another plugin can be introduced, lib-flexible

npm install lib-flexible --save-dev

Introduced in main.js

In this way, the font-size of the root element can be different for different screen sizes. Then we use the rem unit for the page layout, so the box size is different.

Note: If we want to write a certain length in the page, for example, the border-radius is 1px, we only need to use uppercase PX.

Vue project mobile terminal adaptation - rem

Guess you like