preface

I have learned a lot of new things recently, so I can’t wait to share them with you. Those who know this technology don’t need to read it. This article is mainly for those who know this technology for the first time.

1. Install and use lib-Flexible

1.1 Function of lib-flexible

Lib-flexible is a plug-in developed by The Taobao project team. It automatically adds labels to pages according to the screen size and dynamically controls the values of properties such as initial-scale, maximum-scale and minimum-scale. This allows us to calculate rem values based on the design drawing’s PX size, so that the page automatically ADAPTS to the screen size.

1.2 Installation and use of Lib-Flexible

npm install lib-flexible --save
Copy the code

When the installation is complete, introduce lib-Flexible into the main.js file at the project entry

import 'lib-flexible'
Copy the code

1.3 Precautions

Since lib-Flexible dynamically adds meta tags to page headers, it’s a good idea to remove or comment this tag from the directory public/index.html!

1.4 Finished Effect

This is the dynamic zoom ratio of the screen, which changes dynamically depending on the size of the screen.

2. Install and use PostCSS-Px2REM

2.1 The role of PostCSS-PX2REM

Postcss-px2rem will convert your px value to the corresponding REM value. Rem is used for different screen widens, and it is calculated based on the font size of the tag. 1REM = font size of the HTML tag.

2.2 Installation and use of PostCSS-PX2REM

npm install postcss-px2rem --save-dev
Copy the code

After the installation is complete, configure the following code in vue.config.js (there is no js file after the project is created, you need to manually create it yourself) :

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem') ({remUnit: 75   // Only need to change the value here}},}}Copy the code

In the above code you only need to change one place, which is the value you remUnit for. The value of the configuration item remUnit is calculated according to the blueprint, if the blueprint gives the width of 750, then we remUnit at 75 (tenth of the width of the blueprint), if it is 375, then write 37.5.

After the configuration is complete, we can directly develop according to the px value on the design drawing, which is written in the code. The finished effect is as follows:

We can find that the size of the image element changes with the size of the screen, but the relative rem value does not change, because REM value is dynamically calculated according to the font-size value of the HTML root element, and it is also a relative unit, so it will not change.

3. How to solve the problem of third-party component library style conflict

When we introduce a third party component library, will find that the style of the components are affected, all components of the unit into rem, the component will be changed by screen size change, it is because the third party components library is not compatible with px2rem, if that’s what we hope, that you don’t need to do any operation can be normal use; But in general, we don’t want styles in component libraries to be affected.

Solutions are as follows:

Comment out the postcss-px2rem code block configured in vue.config.js

Install postcss-px2REm-exclude

npm  install postcss-px2rem-exclude --save
Copy the code

Create a postcss.config.js file in the root directory and configure the following code

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
            remUnit: 75.exclude: /node_modules|folder_name/i}}}Copy the code

The functionality of this plug-in is to exclude all third-party plug-ins from node_modules, so the styles of third-party component libraries will not be affected.

That’s all. This method can make it easier and faster to develop mobile applications. Try it yourself!