Explanation:
Font size of the root element,
It is a new unit of size (measure) added to CSS3. The font size of the root node (HTML) determines the size of REM, that is, it is a relative unit, relative to (HTML).
The browser’s default font size is 16px, and 1rem is 16px by default. (Chrome minimum font size: 12px)

1: implemented through webPack configuration

Installation: CNPM I lib-flexible -S and CNPM I px2REm-loader -d
  • Configure the loader to automatically convert PX to REM when packaging
    • Plugins: [// process less files {test: /. Less $/, use: [// omit other loader // convert px to rem {loader: 'px2rem-loader', options: RemUnit: 75, // Saves rem digits}}] [},]]Copy the code

    2: implemented in JS mode

    const oHtml = document.getElementsByTagName('html')[0] const width = oHtml.clientWidth; Ohtm.style. fontSize = 12 * (width / 320) + "px"; /* Font-size: 14.0625px for iphone8 (375px); font-size: 15.525px for iphone8p * /Copy the code