Adaptive layout scheme

A set of code corresponding to a design draft, to achieve up/down compatible adaptive layout scheme comparison

Here is only the most superficial method of use. No, do not test for multiple environments (complex layouts, etc.), the content is for reference only.

Further research will be done on each option. When do you ask me? Next time! 👾

start

What is rem

Rem (font size of the root element) is a font size unit relative to the root element < HTML > for calculation.

When setting HTML {font-size: 75px}, other elements should be 1rem = 75px and 4rem = 300px

What is the vw

Vw is a unit of length based on viewPort. 1vw is equal to 1% of window.innerWidth

When the physical width of the device is 375px, 1vw = 3.75px

What is the DPR

Device Pixel Ratio (DPR) is the ratio of physical pixels to individual pixels on the device.

On the Web, the browser provides us with window.devicePixelRatio to help us get the DPR.

The actual physical pixels of the iPhone 6, 7, and 8 are 750 x 1334, as you can see in the developer tools: device independent pixels are 375 x 667, and device pixel ratio DPR is 2

If an element is given a height of 200px(where PX refers to physical pixels, not CSS pixels) and the device pixel ratio of iphone6 is DPR = 2, the given height should be 200px/2=100dp.

Postcss-px-to-viewport postcss-px-to-viewPort postcss-px-to-viewPort

The postCSS-px-to-viewport approach is not that different, it directly calculates the % of each pixel in the design to output VW, REM

Design draft = 375px

1. Change VW scheme

'postcss-px-to-viewport': {
    unitToConvert: 'px'.// The unit to convert, default is "px"
    viewportWidth: 375.// The width of the window corresponds to the width of the design draft
    viewportUnit: 'vw'.// Specify that a transfer is required
    fontViewportUnit: 'vw'.// The viewport unit used by the font
    unitPrecision: 13 // Specifies the number of x digits after the decimal to convert 'px' to the window unit value. }Copy the code

Calculate the proportion of 1px in the design draft and convert it to VW

1px = 1/375 = 0.26666666666% i.e. 100px = 26.6666666666% = 26.66666666666 VW

When actually rendering (375px screen), 26.66666666666 vw = 26.66666666% * 375 = 100px

The body width is fixed after the media query is set beyond the width range in the scheme converted to VW. When the content is centered, the style is too large to affect the viewing.

@media screen and (min-width: 1024px) {
  html {
    max-width: 1024px; }}Copy the code

2. Switch REM schemes

To avoid inconsistent default font sizes in different browsers, we need to fix the font size of the root element HTML

It happens that postCSs-px-viewPort does not support inline style conversions. Font-size: 16px; To fix root’s font size for the rem conversion scheme.

1px = 1/375 = 0.26666666666% or 100px = 26.6666666666% = 26.66666666666 rem

Font-size: 16px; To fix root’s font size. Therefore, when actually rendering (375px screen), the container 26.6666666666666 REM = 26.66666666666 * 16 = 426.66666666656 px

In other words, we need to change the size of the viewport to match the design. Directly deduce the multiple relationship between design drawing and viewportWidth = 426.66666666656/100 = 4.26656 times. Set viewportWidth to 1599.96 (375 * 4.26656 = 1599.96)

Also set the body width of the media query beyond the width range, with the content centered

@media screen and (min-width: 1024px) {
  html {
    max-width: 1024px; }}Copy the code

Rem + VW (netease mobile terminal practice)

In principle, a reference design is also required, assuming a 375px wide design. Calculation method and PostCSS-Px-to-viewPort REM scheme 1 to.

Formula: 1vw = 3.75px 1px = 0.26666666666667 VW 100px = 26.666666666667 VW

1rem = 26.666666666667 vw = 100px

However, it should be noted that 1rem should be set to the corresponding vw value of 100px (to prevent it from being smaller than the browser’s minimum font), and it should be written according to the design drawing Px/100.

When it is necessary to adapt upward, set @media to a different font size.

Also set the body width of the media query beyond the width range, with the content centered.

html {
  font-size: 26.6666666666666667 vw;
  margin: 0 auto;
  body {
    // Reset the font size
    font-size: 0.14 rem; }}@media screen and (min-width: 768px) {
  html {
    font-size: 9vw;
    max-width: 768px; }}Copy the code

Flexible (before hand cleaning method)

Js gets clientWidth, divided into ten parts. And then rem. The font size is 12 * DPR

To quote Teacher Damo:

Since viewPort units are compatible with many browsers, lib-flexible is a transition solution that can be abandoned, and there are problems with both current and previous versions. It is recommended that you start using viewPort instead. See “How to Use VW for Mobile Adaptation in Vue Projects” for a VW compatibility solution.

The principle is easy to understand now. Automatically set the most appropriate HD scaling (body font size, resetting root font size) based on the DPR of the device screen. Width = device independent pixel width, initial/maximum/minimum zoom =1. Calculate the value of root fontSize by JS, so that 1rem = design / 10.

If they say they can give it up, they don’t show it.

Source code address: github.com/amfe/lib-fl…

conclusion

Flexible can now be abandoned and CSS can be used to free up the performance cost of using JS to dynamically modify FontSize

Do mobile only

postcss-px-to-viewport -- vwmethods

A shuttle, nothing to worry about. And the most realistic zoom in and out in proportion to the screen size.

Small screen design upward compatible adaptive large screen

When you need to adapt the design drawing from the mobile terminal to the tablet or PC screen

(most convenient) postCSs-px-to-viewPort — REM

advantages

  1. Automatically convert units in the UI framework.
  2. Cooperate withMedia Media QuerySet up theroot fontSizeSuitable for different resolution sizes as wellLimit maximum width.

disadvantages

  1. All units that are set to be converted will be converted. You cannot set certain styles of units not to be converted.

(Most flexible)rem + vw

advantages

  1. Cooperate withMedia Media QuerySet up theroot fontSizeSuitable for different resolution sizes as wellLimit the maximum width.
  2. Highly customizable, who needs to convert who converts intorem.

disadvantages

  1. When you need to convert units in the UI framework, it can be very large. You need to cover them one by one.

(Not suitable)postcss-px-to-viewport -- vw

This scheme limits the maximum width because the size is more viewport determined. So if you limit the maximum width, the content inside will still get bigger as the viewport gets bigger. So don’t fit

Large screen design downward compatible with adaptive small screen

(recommended)postcss-px-to-viewport -- rem

advantages

  1. Automatically convert units in UI framework, save trouble.
  2. Set the minimum width to center, beyond part of the scrollbar.
  3. Handle for a larger screen than the design draftroot fontSizeSet it to larger.

disadvantages

  1. All units that are set to be converted will be converted. You cannot set certain styles of units not to be converted.

Rem plus vw

Assume the screen is 1024px

Formula: 1vw = 10.24px 1px = 0.09765625vw 100px = 9.765625vw

1rem = 9.765625vw = 100px

advantages

  1. You need to set it1remSet to100px corresponds to vwIs written according to the design diagram (to prevent smaller than the browser’s minimum font)px / 100To write.

disadvantages

  1. Multiple media query changes need to be writtenroot fontSize(There is a problem that the font is too large to display the content on one screen).
  2. When you need to convert units in the UI framework, it can be very large. You need to cover them one by one.
  3. Unable to set minimum width center content.

(Not suitable)postcss-px-to-viewport -- vw

If the root fontSize is smaller than the default minimum fontSize (usually 12px), the root fontSize = 12px will be kept forcibly. Therefore, this method is not suitable.

Demo Warehouse Address

Blog link: Github Gitee