Front-end page adaptation has two general directions: One is layout adaptation, which enables PC, mobile phone, and tablet to share a code. The implementation methods include CSS media query, CSS elastic box layout, and CSS Grid layout. The second is hd adaptation, in the face of mobile development devices with different resolutions and different sizes, the maximum reduction of the effect of the design draft.

Flexibs. js is a method of hd adaptation. It uses javascript to dynamically set font size for HTML based on the DPR value and device width of different devices, and rem units for other elements.

Principle:

Closely related to flexible is the DPR concept, which has the following formula:

DPR (Device pixel ratio) = physical pixels (screen pixels)/device independent pixels (CSS pixels)

DPR is 1 for normal screens and 2 or higher for hd screens. The size of the element defined on our style code is CSS pixels, which means that the pixels will look different on a normal and HD screen. For example,

width:2px; On a normal screen, the physical pixel is 2X2=4. On a HD screen, the physical pixel is (2X2)X(2X2)=16

This phenomenon brings hd picture problems: because the image pixel is physical pixels, if on the basis of common screen drawing (double) on Gao Qingbing show lead to enlarge the fuzzy (1 pixel amplifier for 4), if on the basis of Gao Qingbing mapping (2 times) in ordinary screen display leads to narrowing (4 pixels down to 1). So the perfect solution is for the UI to provide 1x and 2x graphics, and for the front end to be code adapted:

1. css media
@media screen and (-webkit-min-device-pixel-ratio: 2) {}
2. img srcset
<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>
Copy the code

There are also problems with font size and element size, but it is obvious that media query can no longer be used for adaptation. There are too many adaptation codes, so flexible can be introduced.

Rem is CSS3’s new unit of relative length. Rem refers to the size of the font size standard value relative to the root HTML element.

In order to be compatible with the style of third-party plug-ins, we want to display the page at the original scale and do not allow users to modify, so we will always set the page scale=1, flexible then set DPR = parseInt(1/scale)=1 as follows:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Standard HTML root element of the font – size = document. The documentElement. DPR clientWidth * n/n here can be set freely, flexible n would be a 10, so that the element size fit screen size and DPR

  • iPhone3gs: 320px / 10 = 32x
  • IPhone6:375px / 10 = 37.5px

The element is set in REM units, enabling screen adaptation. For example, div width:10rem; 320px on the iPhone3gs and 375px on the iPhone6, both achieve full screen width.

Finally, Flexible listens for the REsize event to recalculate the FONT size Flexible repository of the HTML

  • Unit conversion

The size we get from the design is px, and converting to REM units depends on the compiler plug-in, and there will be decimals. So you can customize the flexible-.js file to calculate the standard value of n for font size at 3.75, so that in HD 1rem = 100px, you can convert units just by doing the calculations in your head.

  • Automatic compilation

Px2rem-loader: Webpack loader that converts PX to REM

Gulp-px3rem: gulp plugin to convert PX to REM

The resources

Solution: Mobile terminal H5 page HD multi-screen adaptation scheme

How does flexible-.js implement REM adaptive