Mobile front-end adaptation solution (summary)

I searched online and found that many interviews will ask questions about mobile adaptation methods. I have read some articles recently and would like to summarize them here.

First, let’s talk about some technical solutions for mobile terminal adaptation that have appeared so far:

• (1) Through media queries, i.e. CSS3 media queries
• (2) Flex layout represented by Tmall homepage
• (3) Rem+viewport scaling, as exemplified by the Taobao homepage
• (4) rem method

1. Media Queries

meida queries method can be said to be the layout method I adopted early on. It mainly executes different css codes by querying the width of the device to ultimately achieve interface configuration. The core syntax is:

@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 determine the device pixel ratio. The method is simple and low-cost, especially when the same set of code is maintained for mobile and PC. Currently, frameworks such as Bootstrap use this layout method
• The picture is easy to modify, just modify the css file
• When the screen width is adjusted, the page can be displayed responsively without refreshing the page

shortcoming

• The amount of code is relatively large and maintenance is inconvenient
• In order to accommodate large screens or high-definition devices, other device resources will be wasted, especially loading image resources.
• In order to take into account the responsive display effects of mobile and PC, it is inevitable that their unique interaction methods will be lost.

2.Flex layout

Let’s use Tmall’s implementation method to illustrate:

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

The height is fixed, the width is adaptive, and all elements use px as the unit.

As the screen width changes, the page will also change accordingly. The effect is similar to the fluid layout of a PC page. When the width needs to be adjusted, just use the responsive layout (such as NetEase News), so that "adaptation" is achieved.

3. rem + viewport scaling

This is also the solution used by Taobao. rem value is set according to the screen width. Elements that need to be adapted use rem as the unit, and elements that do not need to be adapted still use px as the unit. (1em = 16px)

PS: rem
rem is a relative unit newly added in CSS3 (root em), which has attracted widespread attention. How is this unit different from em?
The difference is that when you use rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit combines the advantages of relative size and absolute size. It can be used to proportionally adjust all font sizes by only modifying the root element, while avoiding the chain reaction of compounding font sizes layer by layer. Currently, all browsers except IE8 and earlier support rem. For browsers that do not support it, the solution is also very simple, which is to write an extra declaration of absolute units. These browsers will ignore font sizes set in rem. For example: p{font-size:14px;font-size:0.875rem;}
(Recommend a unit conversion tool: http://pxtoem.com/)

Implementation principle

Enlarge the page by dpr times according to rem , and then set viewport to 1/dpr .

If the DPR of iPhone 6 Plus is 3, the page will be enlarged 3 times, and 1px (CSS unit) is 3px (physical pixel) by default in Plus.
Then set viewport to 1/3, so that the entire page shrinks back to its original size, thus achieving high definition.

In this way, the page width of the entire web page when displayed on the device will be equal to the device logical pixel size, that is, device-width .
The calculation formula for this device-width is:設備的物理分辨率/(devicePixelRatio * scale) ,
When scale is 1, device-width = 設備的物理分辨率/devicePixelRatio .

4. rem implementation

For example, the implementation of the "Meizu" mobile terminal, viewport is also fixed:

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

Use the following code to control the rem reference value (the actual size of the design is measured with a width of 720px)

!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);

css is precompiled through sass , and the variable $px is set to convert the measured px value into rem $px: (1/100)+rem;

1 pixel border HD

1. Taobao implementation method

The Taobao implementation method mentioned above is to use rem + viewport scaling to achieve it.

transform: scale(0.5)

CSS code:

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

shortcoming:

Rounded corners cannot be achieved, and it is troublesome to achieve 4 borders, and it can only be achieved individually. If nested, it will have unwanted effects on the contained effects, so this solution is more often used independently with :after and before.

box-shadow

Implementation method:

Use CSS to process shadows to achieve a 0.5px effect.

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

advantage:

It can basically meet all scenarios, including rounded buttons, single lines, and multiple lines.

shortcoming:

Colors are difficult to handle, and black rgba(0,0,0,1) is the darkest case. There are shadows, which is not easy to use.
Extensive use of box-shadow may cause performance bottlenecks.
The effect of implementing four borders is not ideal.

2. Image Implementation

There are two ways to achieve 1px using background-image : linear-gradient or using a picture directly ( base64 ).

linear-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 a single border or multiple borders and set the color

shortcoming:
Extensive use of gradients may lead to performance bottlenecks Large amounts of code Background images have compatibility issues

This is the end of this article about the mobile front-end adaptation solution (summary). For more relevant mobile front-end adaptation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!