Mobile terminal method: adaptive scheme and HD scheme

Since I started to work as a front-end after graduation, 90% of my projects are dealing with mobile terminals. Therefore, when the words “mobile H5” are written on my resume, I will be asked about adaptive scheme and HD scheme

”Adaptive refers to a set of UI (such as 750 * 1334), which shows almost the same effect under multiple terminals; while HD refers to various precision adaptations made due to the improvement of DPR

This article talks about the adaptive scheme and HD scheme that the author understands

Let’s start with the conclusion

Adaptive scheme

rem
- Adaptation ideas
  - Select a dimension as the design and development basis
  - Define a set of adaptation rules to automatically adapt the remaining dimensions
  - The special adaptation effect gives the design effect
- belong toHistorical products, CSS window units are not supported by mainstream browsers
- principle
  - Dynamically adjust the font size value of the root element HTML according to the window width
  - Set the total width to 100 copies, each of which is called a unit X, and set it at the same time1remThe unit is10x
- shortcoming
  - JS script needs to be loaded and calculated according to the window width of the device, which affects the performance
- Influence: since its birth in 2015, it has occupied a certain proportion in the field of H5 adaptation
- Related Technology Library:flexible、px2rem
vw
- Adaptation ideas (above)
- principle
  - Using the characteristics of CSS window, the total width is100vw, each copy is a unit1vw, setting1remThe unit is10vw
- shortcoming
  - Because it is calculated according to the width of the view, it is not applicable to tablets and PCs
- Influence: the scheme issued in 2018 is currently the mainstream of H5 adaptation
- Related Technology Library:postcss-px-to-viewport
px + calc + clamp
- Adaptation ideas
  - According to the new features of CSS: CSS variable, Calc () function, clamp (), @ container function
- characteristic
  - It solves the fatal shortcomings of REM and VW layout:The perfection of pixels is lost, and once the screen is below or above a certain threshold, there will usually be layout movement or text content overflow
  - Desert proposed it in 2021, which is the most advanced, but it has not been used by large factories (the support rate of clamp function browser is not high for the time being). For details, please see this article of desert:How to build a perfectly scaled UI interface
- shortcoming
  - Because the scheme is advanced, we haven’t seen large factories use it yet

HD scheme

Solution to 1 pixel problem
HD solutions for pictures under different DPRS

To sum up, the adaptive scheme is the solutionAdaptation of terminals, HD solution is the solutionDetail processing of retina screen

Write in front

Before talking about the mobile terminal adaptation scheme, first understand some technical concepts

Device independent pixels

Device independent pixels (DIP) = = = CSS pixels = = = logical pixels, 375 * 667 can be seen directly in chrome

When you see device independent pixels, don’t panic. It represents CSS pixels, and its length and width are found in chrome. But in this way, “device independent pixel”, with a long number of words, is CSS pixel, which is also an artificially given index in theory, also known as logical pixel

Physical pixel

Physical pixel can be understood as the resolution publicized by mobile phone manufacturers when selling mobile phones, that is, physical pixel = resolution, which represents the number of pixels in vertical and horizontal

In other words, there are 1920 pixels in the horizontal direction and 1080 pixels in the vertical direction of the device screen (assuming that the screen resolution is 1920 * 1080), that is, the screen resolution represents physical pixels, which is set at the factory, and the unit is PT,1pt=0.376mm

Physical pixel, also known as device pixel, means device pixel = = = physical pixel. In this way, the length that the device can measure in the physical world can be memorized

DPR（Device Pixel Ratio）

What is the device pixel ratio (DPR)?

DPR = device pixel / device independent pixel, which is usually related to retina screen

Take iphone7 as an example. The DPR of iphone7 = iphone7 physical pixels / iphone7 device independent pixels = 2

Width 1334 / 667 = 2

High 750 / 375 = 2

The DPR of iphone7 is 2, which is what we often call retinal screen. This is a marketing term. It is because of the progress of technology that one CSS pixel is stuffed with more physical pixels

What are the marketing terms: the porter of the nature of nongnongshan spring and the “fan” of Yuanqi forest

The author remembers this:

CSS pixels (device independent pixels) are like a container. In the past, they were inserted one by one, so the DPR was 1. Later, with the development of technology, more real pixels (physical pixels) can be inserted into a container
DPR = device pixels / device independent pixels
DPR = physical pixels (real) / CSS pixels (virtual)

In the retinal screen, take DPR = 2 as an example, use 4 (2×2) physical pixels as a CSS pixel, which makes the screen look clearer (exquisite), but the size of the elements (CSS pixels) itself will not change

With the development of hardware, the DPR of mobile phones such as iphone13 Pro has been 3, and it is not a problem to break through 4 in the future

Back then, what’s the problem with a DPR of 2 or 3? We use CSS as the minimum unit to write code, and the display on the screen also uses CSS as the minimum unit to display, that is, when DPR is 2, we want to simulate1 unit physical pixelYou can’t do it (if the browser supports it)0.5pxCSS can be simulated, but the DPR is 3. Use0.333px？）； Because the device independent pixels (CSS pixels) of the mobile phone are fixed, there will be style dislocation when using the traditional static layout (fixed PX)

iPhone 5/SE: 320 * 568 DPR: 2

iPhone 6/7/8: 375 * 667 DPR: 2

iPhone 6/7/8 Plus: 414* 736 DPR: 3

iPhone X: 375 * 812 DPR: 3

Therefore, we need to adapt the CSS pixels of each terminal and the 1-pixel problem and picture HD problem under different DPRS. With the development of technology, the front ends get rid of IE compatibility and fall into the compatibility swamp of major mobile phone brands

Adaptive scheme

REM layout – second in the world

Introduction: REM is calculated relative to the font size of the root element HTML

Associated with REM is em:

When EM is used as the font size unit, it represents the font size of the parent element. When EM is used as other attribute units, it represents its own font size

When REM acts on a non root element, it is relative to the root element font size. When REM acts on a root element font, it is relative to its initial font size

Essence:Proportional scaling, is a feature that simulates VW through JavaScript

Suppose that the screen width is divided into 100 parts on average, and the width of each part is represented by X, x = screen width / 100. If x is taken as the unit, the value in front of X represents the percentage of screen width

P {width: 50x} / * 50% of screen width*/

If we want the page elements to change proportionally with the screen width, we need the X above. This x is VW, but VW is used on a large scale only after the browser supports it. Before that, JS + REM can simulate this effect

As mentioned earlier, when REM acts on non root elements, it is relative to the font size of root elements. Therefore, after setting the root element unit, non root elements use rem as the relative unit

html { font-size: 16px }
p { width: 2rem } /* 32px */

html { font-size: 32px }
p { width: 2rem } /* 64px */

Here’s the problem. We need to get a dynamic root element font size and change the size of each element

Interestingly, the current practice of our two projects is to set the root element through media query, which is divided into four files, and the default is 16px

The author doesn’t understand this practice. The original developer said that our set has been running for 6 years, and no one said anything about UI adaptation. Here’s a question. Is the UI really well adapted as he said, “media query root element + REM” can also be adapted? Is it perfect?

Later, the author will also show this practice in the demo

But how does the font size of the root element change? It can’t always be 16px. It’s OK under the medium and large screen, but the font is too large under the small screen, so its size should also be obtained dynamically. How to make it dynamic is to make the font size of the root element equal to 1 / 100 of the screen width as mentioned above

html { font-size: width / 100};

How to set the font size of HTML equal to one percent of the screen width? It can be set through JS. Generally, it needs to be set in page DOM ready, resize and screen rotation

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';

Flexible source codeJust like the above idea

After setting the width of 1%, we need to use CSS processors such as SCSS / less to compile and process CSS when writing CSS. It is assumed that the design drawing given is 750 * 1334, and the width of one element is 200 px. According to the formula:

width: 200 / 750 * 100 = 26.67 rem

In sass, you need to set the width of the design drawing for conversion:

@use 'sass:math';

$width: 750px;

@function px2rem($px) {
  @return #{math.div($px, $width) * 100}rem;
}

After compiling above

div {width: 26.667rem}

Its width is different in different sizes

model	size	width
iPhone 5/SE	320 * 568	170 * 170
iPhone 6/7/8	375 * 667	200 * 200
iPhone 6/7/8 Plus	414 * 736	220.797 * 220.797
iPhone X	375 * 812	200 * 200

The effect is as follows (special note: the figure shows the introduction of flexible library, and the font size of its root element is 1 / 10 of the screen)

REM layout (flexible) demo

Advantages: the compatibility of REM is as low as IOS 4.1 and Android 2.1

Disadvantages:

Proportional amplification (it can be said that advantages can also be understood as disadvantages, which can be used in different scenarios)
- There are several starting points for users to choose a large screen. Some people want larger fonts and pictures, while others want more content and don’t want larger icons
Font size cannot use REM (generally, media query is used to control font size)
A maximum width is generally set for browsing broken phase on the PC side

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + 'px';

body {
    margin: auto;
    width: 100rem;
}

What if the user prohibits JS?
- Add nosripe tag to prompt the user
- < noscript > enable JavaScript for a better experience < / noscript >
- Add a default font size to HTML

Relevant technical scheme: flexible（amfe-flexibleperhapslib-flexible） + postcss-pxtorem

Viewport layout – heaven doesn’t give birth to me, which is suitable for the long night

VW is the length unit based on the viewport window. Here, the viewport refers to the visual area of the browser, and this visual area is window innerWidth/window. Size of innerheight

According to CSS values and units module level 4: VW is equal to 1% of the width of the initial containing block (HTML element), that is

1vwbe equal towindow.innerWidth1% of the value of
1vhbe equal towindow.innerHeight1% of the value of

Look at the picture and understand

When talking about REM layout, I once cited the example of X, which is VW

/*REM scheme*/
html { font-size: width / 100}
div { width: 26.67rem }

/*VW scheme*/
div { width: 26.67vw }

VW can also be combined with REM scheme, so JS is not needed to calculate HTML font size

html { font-size: 1vw }
div {width: 26.67rem }

The effect is as follows:

VW adaptation is the native support of CSS, and most mobile phones currently support compatibility. There is no need to load JS, nor will it cause performance problems because of JS

VW does look good, but there are some problems

It also failed to solve the display problem of 1px frame under the HD screen, which needs to be handled by itself
Since the VW scheme is completely proportional scaling, it will be broken on the PC side (the same as REM)

Relevant technical solutions:postcss-px-to-viewport

VW layout demo

PX adaptation – one force reduces ten meetings

Without REM / VW, the traditional responsive layout can also be used in the mobile terminal layout, and the design specification is required

useCSS variableAdaptation (the reasons for the length will not be introduced in detail, but can be viewed directlycode）

Usage scenario: news and content websites are not suitable for REM, because large screen users want to see more content, such as Netease News, Zhihu and taptap

PX + CSS variable demo

Media inquiry – can I have a seat?

As mentioned above, the H5 end of our company used the way of media query to adapt. The author tried to reproduce it, but it can only be said that the big difference is not bad. We can see that the media query wants to do this, but it is still more than enough

Using rem, VW, PX and other methods, non-standard size (375) can be realized667) the height of the lower header is165.59pxBecause of the large screen, the root font size of media is set to 17px. As a result, the height of the header becomes159.38px（17 9.375rem）

As shown in GIF below:

Therefore, only using media query is still unsatisfactory

Media query layout demo

Comparison of various adaptations

The essence of VW and REM adaptation is equal scaling. PX is written directly. It depends on yourself

	REM layout	VW layout	PX + CSS variable layout
Minimum width of container	support	I won’t support it	support
Maximum width of container	support	I won’t support it	support
HD device 1px frame	support	support	support
Container fixed aspect ratio	support	support	support
advantage	1. Old brand scheme 2. When supporting high-definition device 1px frame, it can be written directly in the previous way	1. No need to introduce JS 2. Natural support and standard writing	Same as VW
shortcoming	1. You need to import JS to set the font size of HTML 2. Font size cannot use rem 3. Browsing on the PC side will break the phase, and the maximum width generally needs to be set	1. The phase will be broken at the PC end 2. Old mobile phones are not supported	Same as VW

In addition, there are plans to match VW and rem

Set the VW unit that changes with the change of the window for the size of the root element, and dynamically change the size of each element
Limit the maximum and minimum font size of the root element, combined with the body plus the maximum width and minimum width

//REM unit conversion: 75px is just convenient for calculation, 750px-75px, 640-64px, 1080px-108px, and so on
$vm_ fontsize: 75; //  Base value of the root element size of iPhone 6 size
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
//The root element size is in VW units
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    //At the same time, the maximum and minimum values of root elements are limited through media queries
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
//The body also increases the maximum and minimum width limit to avoid the block element with the default 100% width following the body
body {
    max-width: 540px;
    min-width: 320px;
}

HD scheme

1 pixel problem

1 pixel refers to the display on retina screen1 unit physical pixel

It is well understood that CSS pixels (device independent pixels) are artificially specified by us. When DPR is 1, 1 pixel (referring to CSS pixels we write) is equal to 1 Physical pixel; However, when the DPR is 3, 1 pixel is 3 physical pixels

DPR = 1, where 1 Physical pixel is equal to 1 CSS pixel
DPR = 2, where 1 Physical pixel is equal to 0.5 CSS pixels
- Border width: 1px. 1px here is actually 1 CSS pixel width, which is equal to 2 physical pixels. What the designer actually wants is border width: 0.5px
DPR = 3, where 1 Physical pixel is equal to 0.33 CSS pixel
- What the designer wants is border width: 0.33px

Solution ideas

use0.5px。 There are limitations. IOS 8 and above are supported by Apple system, but IOS 8 and below and Android (some low-end computers) will0.5pxDisplay as0px

Since a CSS pixel represents 2 (DPR = 2) and 3 (DPR = 3) physical pixels, and the device does not know the writing method of 0.5px, draw 1px, and then try to reduce the width by half

programme

Gradient implementation
- background-image: linear-gradient(to top, ,,,)
Using zoom to achieve
- transform: scaleY(0.333)
Using pictures
- base64
Implementation using svg
- Embed background URL
border-image
- Poor low-end offline support

The above is achieved through CSS media query

@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
    only screen and (min-device-pixel-ratio: 3) {
        
}

Image adaptation and optimization

Images usually occupy most of the download resources on the web page. Optimizing images can usually minimize the number of bytes downloaded from the website and improve the performance of the website

Generally, there are some general optimization methods: provide the most suitable picture size for different DPR screens

Adaptation analysis of major manufacturers

Read many articles, such as:How does the manufacturer adapt the mobile terminal

In major factories, there are rem adaptations, VM adaptations, VM + REM combination adaptations, and pure PX solutions

News, community and other scenes with more readable content: PX + flex + percentage
- Such as Ctrip, Zhihu and taptap
Mobile pages with many types of visual components and strong dependence: VW + rem
- Such as e-commerce and Forum

summary

REM scheme, introductionamfe-flexiblelibrary

Design: the design drawing is 750 * 1334. After cutting the drawing, upload it to blue lake and write PX according to the size.

development:

Using REM scheme
- introduceamfe-flexiblelibrary
- installpx2remPX to REM tools like
- to configurepx2rem
- Write PX in the project and output it as rem
- Applicable to any scenario
Using VW scheme
- installpx2vwPX to VW tools
- to configurepx2vw
- Write PX in the project and VW in the output
- Applicable to any scenario
Use PX scheme
- However, because of the design plan, the size of the button is fixed, the size of the icon is standard, and the height of the tabbar is also dead. When everything is standard, it is convenient to write the page
- for example
  - 100 * 50 fixed on the left, flex layout on the right
  - Left fixed 100 * 50, right Calc (100% – 100px) (calculated using Calc in CSS3)

other

caniuseWebsite testing CSS properties and browser compatibility

doubt

Q：Why does the UI library unit of H5 mobile terminal mostly use PX? Will there be no adaptation problem?

In fact, after we have written Px, if the project adopts REM to write business, we will introducepx2rem(it has not been maintained for six years) can be converted.

In the like vant library, its introduction to browser adaptation is:

Viewport layout

Vant is used by defaultpxAs a style unit, use if necessaryviewportUnits (VW, VH, Vmin, Vmax). It is recommended to use postcss PX to viewport for conversion

Postcss PX to viewport is a postcss plug-in that converts PX units into VW / VH units

REM layout

If necessaryremFor unit adaptation, the following two tools are recommended:

Postcss pxtorem is a postcss plug-in that converts PX units into REM units

Lib flexible is used to set the benchmark value of rem

Demo collection:Online demo