Summary of webpack's mobile adaptation solution

One of the most common problems in mobile development is adapting to different screen widths. Currently, the more common adaptation solutions are rem and vw, which are relative units in CSS.

rem

W3C defines rem as the font-size of the root element. It is a unit determined only relative to the font-size of the browser's root element (HTML element). That is to say, for models of different widths, we only need to calculate the font size of the corresponding root element, and use the same CSS code to achieve proportional adaptation. Consider the simplest case:

HTML code snippet

// Essential meta for mobile pages, set the width of the device screen to the document width <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

js code snippet

//Calculate the font size of the root element based on the document width. Take 1/10 of the document width as an example. If the screen width is 375, then the root element font-size is 37.5px
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / 10 + 'px';

CSS code snippet

//At this time, if you write .div{
  width: 2rem;
}
//Then the width of this div is 75px. Similarly, if the screen width is 360, then the div will be 72px wide.
//In daily development, the most common design draft is 750px. If the height of an area in the design draft is 30px,
//Write height: 0.4rem (30/75) in CSS to achieve proportional scaling

In actual development, we usually use plugins to achieve rem adaptation when building webpack: postcss-pxtorem and lib-flexible.

Install: npm i postcss-pxtorem --D and npm i amfe-flexible --S

Configure postcss-loader in webpack.config.js

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname,"/dist"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader','css-loader','postcss-loader'] //Configure postcss-loader
            }
        ]
    },  
}

Create a new .postcssrc.js file in the project root directory and write the postcss-pxtorem plugin configuration in it

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 75, //750's design draft propList: ['*']
     }
   }
}

Introduce lib-flexible into the entry js file ("./src/index.js") specified by entry

import 'amfe-flexible'

In this way, you can directly write the absolute pixel value in the design draft in CSS. For example, if the width of a div#test in a 750 design draft is 200px, you can write it directly without conversion.

#test{
  width: 200px
}

vw

Another solution is to use vw: 1% of viewport's width, which is a unit relative to the width of the browser's visible area.

// Essential meta for mobile pages, set the width of the device screen to the document width <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

On mobile devices, if width = device-width is configured, 100vw is the screen width.

When using vw layout, there is no need to dynamically set the font-size of the root element in js like rem, but it is directly relative to the screen width. For example, in the design draft of 750, the width of a div is 200px, so you can write: width: 200 / 750 * 100 vw

With webpack, we can use the postcss-px-to-viewport plugin to achieve this:

Install: npm i postcss-px-to-viewport --D

Configure postcss-loader in webpack.config.js as rem above.
Create a new .postcssrc.js file in the project root directory and write the postcss-px-to-viewport plugin configuration in it

module.exports = {
  "plugins": {
    'postcss-px-to-viewport': {
        viewportWidth: 750 //750 design draft}
   }
}

This way, you can write the absolute pixel value in the design draft directly in CSS, the example is the same as the rem example above.

Adapt to third-party UI framework

Sometimes we use other component libraries on mobile devices and reference third-party UI frameworks such as vant and mint-ui. Because third-party frameworks use px units, based on a 375px design draft, if our project is a 750px design draft, we cannot use the same viewportWidth for adaptation.

At this time, you can configure it as follows in .postcssrc.js (taking vw as an example, rem is similar):

const path = require('path')
module.exports = ({file}) => {

  //If you use the vant UI framework const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
  
  return {
    "plugins": {
      "postcss-px-to-viewport": {
        viewportWidth: width,
      }
    }
  }
}

Conclusion

rem and vw are both commonly used mobile adaptation solutions. The difference between the two is, first of all, in compatibility. Rem is compatible with older browser versions, refer to the caniuse website caniuse.com/; secondly, rem needs to calculate the font size of the root element through js, while vm is a pure CSS implementation.

This concludes this article on the summary of webpack's mobile adaptation solution. For more relevant webpack mobile adaptation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!