Mobile terminal adaptation scheme

1. Rem ADAPTS to mobile terminals

2. Vw achieves mobile end adaptation

3. Percentage fit

4. @ media adapter

1. Rem ADAPTS to mobile terminals

The most commonly used responsive layout scheme is to use REM units to calculate the size of the HTML root font on different mobile devices to achieve page adaptation.

The principle of interpretation

First of all, what is REM? Rem is a relative unit (root EM) added to CSS3, which has attracted a lot of attention. It is relative to the HTML root element. If we set the fontSize of the HTML root node fontSize to 10px, then the pixel value of all DOM elements in the HTML with rem units is y(px)=x(rem) * 10. Such as:

 body {
   fontSize: 10px
 }
 p {
   width: 10rem} the width of the p label is y(px) =10(rem) * 10(body fontSize) = 100(px)
Copy the code

After understanding the REM unit, the principle of REM mobile adaptation becomes very simple — set different root font sizes for different devices, and use rem size to achieve mobile adaptation on different devices, focusing on calculating the size of the root font. Now let’s talk about how to calculate the root font size on different devices

For the first step, assume the visual is 1080px and adjust it accordingly. The second step is to obtain the viewport width of the devicedocument. DocumentElement. ClientWidth (different equipment layout is not the same as the viewport), assuming that a mobile phone in the viewport width is 320 px third step, from the point of view of the UI design draft first, take 100 px (mainstream) to HTML root element fontSize, then10.8rem corresponds to the entire width of 1080px. Step 4, now that the actual width of our phone is 320px, the actual fontSize of the HTML root element is y(px)/100(px) = 320px/1080px    y = 29.6px, so we have the size of fontSize. Step 5, convert the px size to REM sizeCopy the code

practice

First, create page-scale.js, calculate and set the fontSize of the HTML root element, and listen for the resize event to update the fontSize

const uiWidth = 1080; / / HTML set the default font is 100 px body font is 16 px document. The body. The style.css. FontSize = "16 px"; // Listen for the browser zoom event window.addEventListener("resize", resizeHandler); / / HTML font size resizeHandler () {let contW = math.h floor (document. DocumentElement. ClientWidth); let fontS = (contW / uiWidth) * 100; document.documentElement.style.fontSize = fontS + "px"; }Copy the code

Step 2, use the postCSS-PxtoREM plugin to convert all px sizes to REM sizes

module.exports = { plugins: { 'postcss-pxtorem': { rootValue: // The font size of the root element or the font size of the root element is returned according to the input parameter. In this case, the UI 1080px (full width) is converted to 10.8rem, and the other dimensions y(rem) = 10.8(rem) * x(px) / 1080(px) propList: [],// Attribute to be converted selectorBlackList:[],// Ignore selector}}}Copy the code

With the introduction of page-scale.js files and the introduction of the Webpack postCSS-PxtoREM unit conversion software, it is possible to use REM to implement mobile adaptation. However, there is a disadvantage of using REM unit to implement mobile adaptation — it requires an embedded JS script to dynamically calculate the size of the root element. Let’s take a look at how VW implements mobile adaptation.

2. Vw achieves mobile end adaptation

The principle of interpretation

Next, see how to use VW units for page layout.

So let’s first understand what vw is, right?

Vw is viewport unit. In viewport unit, “viewport” refers to the viewport area of the browser on the desktop. On the mobile side it means Layout Viewport in Viewport.

Now let’s look at the conversion relationship between VW and viewport units

After knowing vw unit, it is not difficult to guess how to use it for mobile end adaptation — for different models, we just need to figure out the proportion between the size of UI design draft (generally 1080px) and the size of viewport (suppose 375px), and then replace px size with VW size

K = 1vw = 1080px / 375px = 2.88y (vw) = size of the draft x (px)/kCopy the code

The vw size of each DOM element can be obtained from the above formula and then set.

However, in the actual development process, it is very tedious to calculate the VW size of each DOM element. Don’t worry, we can use the plug-in (postCSS-px-to-viewport) to help us complete this calculation

Postcss-px-to-viewport is a plugin for the PostCSS tool. It is used to convert all the px dimensions in the CSS to VW dimensions. Before introducing the postCSs-px-to-viewPort plugin, let’s take a quick look at the PostCSS tool.

PostCSS is a tool to transform CSS using JS plug-ins. You can think of it as a platform, which contains many plug-ins for CSS processing. It itself is only responsible for the CSS code parsing into Abstract Syntax Tree structure (AST), I understand is to use JS object Tree to describe CSS, and then you can modify THE JS object to modify CSS, to achieve the purpose of CSS optimization and adjustment. See the following figure to understand the functions of PostCss.

Postcss-px-to-viewport is a postCSS plugin.The postCSs-px-to-viewport plugin is easy to use, postCSS supports WebPack packaging, directly in the Webpack and configure the plugin.

The following is a brief introduction to the operation steps:

practice

First step, install the plug-in

npm install postcss-px-to-viewport
Copy the code

The second step is to introduce the plug-in into webpack and configure it as follows (vue.config.js) :

const PxtoVw = require('postcss-px-to-viewport') module.exports = { css: { loaderOptions: { postcss: { plugins: [new PxtoVw({unitToConvert: 'px', // the unitToConvert, default is "px"; viewportWidth: 1080, // the width of the design port, to scale unitPrecision: PropList: ['*'], // List of attributes to convert,* means match all,! Means not convert viewportUnit: 'vw', // Converted viewportUnit: fontViewportUnit: 'vw', // The viewport unit used for the font after conversion, selectorBlackList: [], // The CSS selector without conversion, continue to use the original unit minPixelValue: 1, // Set the minimum conversion value mediaQuery: Replace: true // Replace: true // exclude: [/node_modules/] // Ignore files in some folders that need vm conversion because they reference game/vui's toast component})]}}}}Copy the code

After the plug-in is configured, Webpack will convert the PX size in CSS to VW size in accordance with the agreed proportion when packaging the project, so as to achieve mobile end adaptation. Vw and REM are the mainstream mobile end adaptation schemes with good compatibility.

3. Percentage fit

Introduction of the principle

Use % units to achieve mobile adaptation, each element size relative to the parent element size is implemented in percentage units, used to define the child element width.

This solution has fatal problems and cannot adjust the font size, so it has been phased out and is not used much.

4. @ media adapter

Introduction of the principle

@Media is a new attribute of CSS3. Its principle is to monitor the width of mobile devices, and then adapt different CSS styles according to different widths to achieve mobile adaptation

@media screen and(max-width:300px){ html{ font-size:32px; } } @media screen and(max-width:600px){ html{ font-size:32px; } } @media screen and(max-width:900px){ html{ font-size:32px; }}Copy the code

Advantages: Avoid rem and VW accuracy problems

Disadvantages: large amount of code, inconvenient maintenance