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

rem

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

  • HTML snippets
<meta name="viewport" content="width=device-width, initial scale=1, User-Scalable =0"> <meta name="viewport" content="width=device-width, initial scale=1, user-Scalable =0">Copy the code
  • Js code snippet
/ / width calculation according to the document root element of the font size, width is 1/10 of the document, for example, if the screen width is 375, then the root element the font - size 37.5 px var w = document. The documentElement. ClientWidth; document.documentElement.style.fontSize = w / 10 + 'px';Copy the code
  • CSS code snippets
Div {width: 2rem; } // The width of this div will be 75px, and the width of this div will be 72px if the screen width is 360. // If the height of an area is 30px, write a height: 0.4rem (30/75) in the CSS to complete the scaleCopy the code

In practice, we usually use plug-ins to implement REM adaptation during webPack building: PostCSS-pxtorem and Lib-Flexible.

Installation: NPM I PostCSS-pxtorem –D and NPM I AmFe-Flexible –S

  • inwebpack.config.jsConfigure postcss – loader
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}]},}Copy the code
  • Create a new one in the project root directory.postcssrc.jsFile in which to write the Postcss-PxTorem plug-in configuration
Module. exports = {"plugins": {"postcss-pxtorem": {rootValue: 75, //750 propList: ['*']}}Copy the code
  • In the entry js file specified in entry ("./src/index.js") with lib-flexible
import 'amfe-flexible'
Copy the code

For example, if div#test has a width of 200px in a 750 design, it can be written like this without any conversion.

#test{
  width: 200px
}
Copy the code

vw

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

<meta name="viewport" content="width=device-width, initial scale=1, User-Scalable =0"> <meta name="viewport" content="width=device-width, initial scale=1, user-Scalable =0">Copy the code

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

With VW, you don’t need to dynamically set the root element’s font-size in JS like REM, but directly relative to the screen width. Width: 200/750 * 100 vw; width: 200/750 * 100 vw

For webpack, we can use the Postcss-px-to-viewport plugin:

Install: NPM I postcss-px-to-viewport –D

  • As in rem abovewebpack.config.jsConfiguration postcss – loader.
  • Create a new one in the project root directory.postcssrc.jsFile in which to writepostcss-px-to-viewportThe plug-in configuration
Module. exports = {"plugins": {'postcss-px-to-viewport': {viewportWidth: 750 //750 design}}}Copy the code

In this way, you can write the absolute pixel value of the design draft directly in CSS, as shown in the rem example above.

Adapt third-party UI framework

Sometimes we use other component libraries on mobile, referencing third-party UI frameworks like Vant and Mint-UI, which use px units and are based on a 375px design. If our project is a 750px design, we cannot use the same viewportWidth to fit it.

Postcssrc. js can be configured as follows (take vw as an example, and rem is similar) :

Const path = require('path') module.exports = ({file}) => {// if vant UI framework const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375-750; return { "plugins": { "postcss-px-to-viewport": { viewportWidth: width, } } } }Copy the code

conclusion

Rem and VW are both commonly used mobile terminal adaptation solutions. The difference between the two is compatibility. Rem works with older browser versions. See caniuse at caniuse.com/. Secondly, REM needs to calculate the font size of the root element through JS, and VM is pure CSS implementation.