Recently, I took a look at some articles about mobile terminal adaptation, and made a summary and comparison based on my own experience.

So, let’s start with the topic. First of all, let’s talk about some technical solutions for mobile terminal adaptation that have emerged at present:

  • The way to query through the media isCSS3themeida queries
  • Represented by the homepage of TmallflexElastic layout
  • Taobao home page as a representativerem+viewportThe zoom
  • remway

Meida Queries

The method of Meida Queries can be said to be the layout method I used in the early stage. It mainly executes different CSS codes by querying the width of the device, and finally achieves the configuration of the interface. The core syntax is:

@media screen and (max-width: 600px) {/* When the screen size is less than 600px, apply the following CSS styles */ /* Your CSS code */}Copy the code

advantages

  • media queryCan do device pixel ratio judgment, the method is simple, low cost, especially for mobile and PC to maintain the same set of code. Now likeBootstrapFrames are laid out in this way
  • Images are easy to modify, just by modifying the CSS file
  • Adjust the screen width for responsive display without refreshing the page

disadvantages

  • Large amount of code, maintenance is not convenient
  • Trying to accommodate a large screen or HD device wastes resources on other devices, especially loading images
  • In order to give consideration to the responsive display effect of mobile terminal and PC terminal, it is inevitable to lose their unique interaction modes

FlexElastic layout

Illustrated by the implementation of Tmall:

The height is fixed, the width is adaptive, and the element uses PX as the unit.

As the screen width changes, the page will also change, the effect is similar to the FLUID layout of the PC page, in which the width needs to adjust the use of responsive layout on the line (such as netease news), so as to achieve “adaptation”. DEMO>>

rem+viewportThe zoom

This is also the solution used by Taobao. Rem values are set according to the width of the screen, and elements that need to be adapted use REM as the unit, while elements that do not need to be adapted use PX as the unit.

Realize the principle of

Enlarge the page by DPR according to REM, and then set the viewport to 1/ DPR.

  • For example, if the DPR of iphone6 Plus is 3, the page will be enlarged 3 times as a whole, and 1px(CSS units) will default to 3px(physical pixels) under Plus.
  • thenviewportSet it to 1/3 so that the entire page shrinks back to its original size. To achieve hd.

The width of the entire page displayed on the device is equal to the device’s logical pixel size (device-width). The device-width is calculated by:

Device physical resolution /(devicePixelRatio * Scale), in the case of scale 1, device-width = device physical resolution /devicePixelRatio.

For details, see github.com/amfe/lib-fl… Or www.npmjs.com/package/ani… .

remimplementation

Talk about the implementation of meizu mobile terminal of our company, viewport is also fixed: < meta name = “viewport” content = “width = device – width, initial – scale = 1, maximum – scale = 1, the user – scalable = no” >.

Control the REM reference values with the following code (the actual size of the design is 720px wide)

! 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 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);Copy the code

$px: (1/100)+rem; $px;

1 pixel bezel hd

Taobao implementation method

The realization of taobao mentioned above is REM +viewport zoom to achieve.

The transform: scale (0.5)

The CSS code:

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

Disadvantages:

  • Rounded corners can not be realized, it is troublesome to realize 4 borders, and can only be implemented separately, if nested, it will produce unwanted effects on the included effects, so this scheme is combined with :after and before are used more independently.

box-shadow

Implementation method:

Use CSS to create a 0.5px shadow effect.

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

Advantages:

Basically all scenes can be satisfied, including buttons with rounded corners, single and multiple lines.

Disadvantages:

  • Color is hard to handle, blackRgba (0,0,0,1)The deepest case. It’s hard to use when there are shadows.
  • A lot of usebox-shadowPerformance bottlenecks may result.
  • Four border implementations are not ideal.

Image to realize

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

Linear-gradient (50% color, 50% transparency)

A 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;
}Copy the code

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;
}Copy the code

Advantages:

  • Single or multiple borders can be set
  • I can set the color

Disadvantages:

  • Heavy use of gradients can lead to performance bottlenecks
  • Large amount of code
  • Multi-background images have compatibility problems