About the implementation of mobile terminal adaptation

Usually on the PC side, what we usually do may be to fix a middle width, and then use the media query to do the response type and so on. However, on mobile devices, there are many screen widths on the market, so HERE is a summary of adaptation solutions.

Mobile terminal adaptation, is in the different width of the device screen, display normal, without leaking white space or overflow, see the effect:

As you can see above, both the image and the title change with the size of the screen, and there are two main ways to adapt.

Rem layout

The REM layout is mainly realized by using 1REM equal to the size of the root node. The size of the root font is dynamically changed through the screen width, so as to realize the adaptation of different screens:

Assuming that the design width is 375px, the root font size corresponding to 1rem should be:

html { font-size: 1px; }
body { font-size: 16px; } / / becausehtmlFonts affect everything else, sobodyReset to default sizeCopy the code

In this way, 1vw corresponds to 1px, but the size of REM does not change with the screen, so we have to change it according to the screen width. There are two ways to change it: the first way is to change it dynamically through JS; Here, I introduce another way to change by VW:

html { font-size: calc(100vw / 375); }
body { margin: 0; font-size: 16px; }
Copy the code

Of course, the ratio can be set to different, according to their own habits can be set to other sizes.

The principle is: need root font size/design width = need vw size / 100VW.

Vw layout

Vw calculates the width according to the viewport. One VW represents 1/100 of the viewport, and 100VW represents the entire width of the viewport. By using VW attributes and SCSS precompiling, the adaptive layout of the mobile terminal can be easily realized:

@width: 375; // The width of the design@function vw($px) {
    return ($px / $width) * 100vw;
}
Copy the code

This creates an adaptive function through SCSS that can be called to obtain different units for different screen widths:

img {
    width: vw(375); / / in375pxUnder the screen, it means the width is375
}
Copy the code

The principle is: the width of the design target/the width of the design = the size of vw / 100VW.

postcss-plugin-px2rem

With the above VW layout and REM layout, we can achieve mobile adaptation, but it is not powerful enough. Through the postCSS plug-in, we can configure more options for adaptation.

The installation

NPM:npm i --save postcss-plugin-px2rem

Yarn:yarn add postcss-plugin-px2rem

use

Based on Vue, you can configure the px2rem plug-in in vue.config.js or create a new postcss.config.js file:

module.exports = {
  plugins: [require('postcss-plugin-px2rem') ({rootValue: 100.exclude: /(node_module)/,
    mediaQuery: false}})]Copy the code

RootValue = 1px = 1/100rem; of course, you can also use objects such as {px: 50, RPX: 100};

Exclude means excluded files (these do not compile px units to REM);

MediaQuery represents a style that excludes media queries (these files do not compile px units into REM).

After the configuration is complete, we still need to set the root font size of the HTML, here because rootValue is 100, assuming the design size is 750px, set it as follows:

html { font-size: calc(100 * 100vw / 750); }
body { font-size: 16px; }
Copy the code

In addition to converting the PX, we can also set the layout of the RPX as a small program using the same method we used to set the rootValue as an object:

module.exports = {
  plugins: [require('postcss-plugin-px2rem') ({rootValue: {
        px: 50.rpx: 100
    },
    exclude: /(node_module)/,
    mediaQuery: false}})]Copy the code

html { font-size: calc(100 * 100vw / 750); }
body { font-size: 16px; }

img {
    width: 750rpx; / / is equivalent to375px
}
Copy the code

With this in mind, you can use RPX to complete the layout like a small program. See postcss-plugin-px2rem for more configuration.

conclusion

The adaptation scheme is no more than REM and VW. The main reason is that the conversion formula may be troublesome, and sometimes it is even difficult to understand. Personally, I think I can try it more and gradually understand it.

About the implementation of mobile terminal adaptation