Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

When writing our mobile pages, we often need to do some adaptive processing to the page. In order to display the same picture in different screen sizes. This brings us to the responsive layout that we’re going to talk about today.

Responsive layout.

  • Common responsive layouts include REM, VW, and REM + VW.

REM

  • A unit of relative length. Rem (font size of the root Element) is a unit of font size relative to the root element. Also common is em, which is used relative to the parent element’s font size in font size and relative to its own font size in other attributes, such as width. Vw, 1% of the window width.

  • According to the W3C specification, an object unit is defined as the computed value of font size relative to the root element. In the font size attribute of the root element, rem units refer to the initial value of the attribute, which means that 1rem is equal to the font size of the HTML element (the default for most browsers is 16px).

  • Next to introduce the implementation of REM scheme

lib-flexible

  • Solve some adaptive problems.

  • First, install the following dependencies,

npm i lib-flexible

  • The introduction of
// main.js
import 'lib-flexible/flexible.js'
Copy the code

postcss-plugin-px2rem

  • A postCSS plugin to convert PX into REM.

  • The installation

npm i postcss-plugin-px2rem

  • use
// vue.config.js module.exports = { css: { loaderOptions: { postcss: { plugins: [require('postcss-plugin-px2rem')({rootValue: 108, // exclude: /(node_module)/, // Exclude certain folders minPixelValue: 3, // Replace the minimum pixel value, only for 3px and above})]},}},}Copy the code

Ok, that’s all for today. Bye!