Mobile front end adaptation scheme (summary)

Time:2021-5-29

After searching on the Internet, many interviewees will be asked about the method of mobile terminal adaptation. Recently, I read some articles. Here’s a summary.

First of all, let’s talk about some technical solutions for mobile terminal adaptation

  • (1) Through the way of media query, that is CSS3 Meida queries
  • (2) Flex flexible layout represented by tmall home page
  • (3) REM + viewport zoom represented by Taobao home page
  • (4) REM mode

1.Media Queries

meida queriesIt can be said that the layout method I used in the early stage is mainly to query the width of the device to perform different taskscssCode, and finally achieve the configuration of the interface. The core grammar is as follows:

@Media screen and (max width: 600px) {/ * when the screen size is less than 600px, apply the following CSS style*/
  /*Your CSS code*/
}

advantage

  • Media query can judge the pixel ratio of the device. The method is simple and the cost is low, especially when the mobile and PC maintain the same set of code. Currently, frameworks like bootstrap use this layout
  • The picture is easy to modify, just modify the CSS file
  • Adjust the screen width without refreshing the page can be responsive display

shortcoming

  • Large amount of code, inconvenient maintenance
  • In order to take into account the large screen or high-definition devices, it will cause waste of other device resources, especially loading image resources
  • In order to give consideration to the responsive display effect of mobile terminal and PC terminal, it is inevitable to lose their unique interaction mode

2. Flex flexible layout

The implementation mode of tmall is described as follows:

itsviewportIt’s fixed:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

Height fixed, width adaptive, elements are usedpxDo units.

As the screen width changes, the page will also change. The effect is similar to the fluid layout of the PC page. When the width needs to be adjusted, just use the responsive layout adjustment (such as Netease News), so as to realize “adaptation”.

3. REM + viewport scaling

This is also the scheme used by Taobao, which is set according to the screen widthremValue, the elements that need to be adapted are usedremThe elements that do not need to be adapted are still usedpxUnit( 1em = 16px)

PS:rem
Rem is a new relative unit (root em, root EM) in CSS3, which has aroused wide attention. What is the difference between this unit and em?
The difference is that when rem is used to set the font size for the element, it is still the relative size, but the relative size is only the HTML root element. This unit can be described as a set of relative size and absolute size
It can adjust all font sizes proportionally only by modifying the root element, and avoid the chain of font size compounding layer by layer
Reaction. At present, except IE8 and earlier versions, all browsers support rem. For browsers that don’t support it, the way to deal with it is very simple, that is, to write more
A statement of absolute units. These browsers ignore the font size set with rem. For example: P {font}- size:14px; font- size:0.875rem; }
(recommend a unit conversion tool:http://pxtoem.com/)

Implementation principle

according toremEnlarge the pagedprTimes, thenviewportSet to1/dpr.

If the DPR of iPhone 6 plus is 3, the whole page will be enlarged by 3 times, and 1px (CSS unit) is 3px (physical pixel) by default under plus
thenviewportSet to 1 / 3, so that the whole page retracts the original size, so as to achieve high definition.  

 

 

In this way, when the whole web page is displayed in the device, the page width will be equal to the logical pixel size of the device, that isdevice-width
thisdevice-widthThe calculation formula is as follows:Physical resolution of device / (devicepixelratio * scale)
When scale is 1,Device width = physical resolution of the device / devicepixelratio

4. REM implementation

For example, the implementation of Meizu mobile terminal,viewportIt’s also fixed:


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

It is controlled by the following coderemReference value (the actual size of the design draft is measured by 720px width)

 

!function (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    function e() {
      var h = a.getBoundingClientRect().width, g;
      if (b === 1) {
        h = 720
      }
      if(h>720) h = 720;// Set the limit value of the reference value
      g = h / 7.2;
      a.style.fontSize = g + "px"
    }

    if (b > 2) {
      b = 3
    } else {
      if (b > 1) {
        b = 2
      } else {
        b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("resize", function () {
      clearTimeout(f);
      f = setTimeout(e, 200)
    }, false);
    e()
  }(window);

cssadoptsassPrecompile, set the measuredpxValue transformationremVariable of$px: (1/100)+rem;

1 pixel frame HD

1. Implementation of Taobao

The implementation of Taobao mentioned above isrem+viewportZoom.

transform: scale(0.5)

CSScode:


div{
    width: 1px;
    height: 100%;
    display: block;
    border-left: 1px solid #e5e5e5;
    -webkit-transform: scale(.5);
    transform: scaleX(.5);
}

Disadvantages:

Fillet can’t be realized. It’s troublesome to realize four borders, and it can only be realized separately. If nested, it will produce unwanted effect on the included effect, so this scheme is used more independently with after and before.

box-shadow

Implementation method:

The effect of 0.5px is achieved by using CSS for shadow processing.


-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

advantage:

Basically all scenes can meet the requirements, including rounded button, single line and multiple lines.

Disadvantages:

The color is not easy to handle, blackrgba(0,0,0,1)The deepest situation. There are shadows, it’s not easy to use.
Extensive usebox-shadowMay cause performance bottlenecks.
The effect of four borders is not ideal.

2. Picture implementation

usebackground-imageThere are two ways to implement 1px: gradientlinear-gradientOr use pictures directly(base64)。

Gradual changelinear-gradient(50% colored, 50% transparent)

Single line:


div{
    height: 1px;
    background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

Multiple lines:


div{
    background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%),
    -webkit-linear-gradient(bottom, transparent 50%, #000 50%),
    -webkit-linear-gradient(left, transparent 50%, #000 50%),
    -webkit-linear-gradient(right, transparent 50%, #000 50%);
    background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
    background-repeat: no-repeat;
    background-position: top left, bottom left, left top, right top;

advantage:
You can set single or multiple borders
You can set the color

Disadvantages:
Heavy use of gradients can lead to performance bottlenecks
Large amount of code
Multiple background images have compatibility problems

This article about mobile front-end adaptation scheme (summary) is introduced here. For more related mobile front-end adaptation content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

Less sass SCSS stylus of CSS preprocessor

Let’s ask ourselves a question: why do we need a preprocessor?The answer is self-evident, that is, CSS itself has some disadvantages: The syntax is not strong enough to be written nested, resulting in unclear style logic in the project. There is no variable and logical reuse mechanism. When it is necessary to reuse code, you […]