Shulou(Shulou.com)05/31 Report--

This article mainly explains "case analysis of mobile 1px problems in html". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn the "case Analysis of Mobile 1px problems in html".

problem

Why is there a 1px problem?

What are the ways to implement 1px? What are the advantages and disadvantages of these methods?

Which solutions are used in open source projects?

How to deal with 1px related issues in the project?

Origin

Basic concept

First of all, we need to understand two concepts, one is that pixel can be abbreviated to px, and the other is the device pixel ratio (DPR).

Pixel: the smallest unit in an image represented by a sequence of numbers, in px, that cannot be divided again.

Device pixel ratio (DPR): device pixel ratio = device pixel / device independent pixel.

Let me briefly explain a few concepts.

CSS pixels (virtual pixels): refers to the logical pixels used in the CSS style code. In the CSS specification, length units can be divided into two categories, absolute units and relative units. Px is a relative unit, relative to the device pixel.

Device pixel (physical pixel): the smallest physical unit in which the device can control the display, meaning the dots on the display. From the day the screen is produced in the factory, the pixels of the equipment on it are fixed, which is related to the size of the screen.

Device independent pixel (logical pixel): can be thought of as a point in a computer coordinate system that represents a virtual pixel that can be used by a program (for example: CSS pixel). The point is not of a fixed size, the smaller the pixel, the clearer it is, and then converted by the related system into a physical pixel. That is, when the logical pixel is 1pt, it is displayed as the physical pixel of 2px on the device with DPR 2

Reference data

Parameters of various types of iphone mobile phone screen devices

Note: the scaling factor here is the value of DRP.

Design draft comparison data

Some people wonder why the design draft shows 750x1334, because the design draft is the physical pixel of the display.

While the pixel in our css is logical pixel, it should be 375x667. When writing the code, we should set the custom width to 375px.

So at this time, the actual css parameter represented by the 1px width on the design draft should be 0.5px corresponding to the physical pixel 1px, so how to realize that the physical pixel is 1px?

Practice

In the final analysis, there are two schemes, one is to use transfrom:scaleY (0.5) in css, and the other is to set media query to scale according to different DPR.

Solution one

Principle

Zoom using the pseudo element of css:: after + transfrom

Why use pseudo elements? Because pseudo elements:: after or:: before are independent of the current element, they can be scaled separately without affecting the scaling of the element itself

Pseudo elements most browsers can also use single quotes by default, in the same form as pseudo classes, and single quote compatibility (ie) is better.

Realize

Cell .cell {width: 100px; height: 100px;} .border-1px:after {content:'; position: absolute; box-sizing: border-box; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid # 000; border-radius: 4px;-webkit-transform: scale (0.5); transform: scale (0.5);-webkit-transform-origin: top left Border-1px-top:before {content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid red; transform: scaleY (.5); transform-origin: left top;}

Solution 2 (upgrade plan 1)

Principle

Use less to encapsulate the common code (scheme 1), while adding media queries to scale different DPR devices.

Border (@ borderWidth: 1px; @ borderStyle: solid; @ borderColor: @ lignt-gray-color; @ borderRadius: 0) {position: relative; &: before {content:'; position: absolute; width: 98%; height: 98%; top: 0; left: 0; transform-origin: left top;-webkit-transform-origin: left top Box-sizing: border-box; pointer-events: none;} @ media (- webkit-min-device-pixel-ratio: 2) {&: before {width: 200%; height: 200%;-webkit-transform: scale (.5) } @ media (- webkit-min-device-pixel-ratio: 2.5) {&: before {width: 250%; height: 250%;-webkit-transform: scale (.4);}} @ media (- webkit-min-device-pixel-ratio: 2.75) {&: before {width: 275% Height: 275%;-webkit-transform: scale (1 / 2.75);}} @ media (- webkit-min-device-pixel-ratio: 3) {&: before {width: 300%; height: 300%; transform: scale (1 / 3);-webkit-transform: scale (1 / 3) }. Border-radius (@ borderRadius); &: before {border-width: @ borderWidth; border-style: @ borderStyle; border-color: @ borderColor;}} .border-all (@ borderWidth: 1px; @ borderStyle: solid; @ borderColor: @ lignt-gray-color; @ borderRadius: 0) {.border (@ borderWidth; @ borderStyle) @ borderColor; @ borderRadius);}

Other options:

Use pictures: the compatibility is the best, the flexible lines are the worst, and the color and length cannot be changed.

Using viewport and rem, js dynamically changes the scale zoom in viewport, but the disadvantage is that it is not suitable for existing projects, such as those that use vh and vw layouts

Use css gradients linear-gradient or box-shadow

The above three schemes have fatal defects and are not recommended for the time being.

Compatibility

Finally, let's take a look at the compatibility, mainly the compatibility of pseudo elements, transform:scale and min-device-pixel-ratio.

The solution of open source library

Vant component library

Skip to github to view the relevant code

Written in less

.hairline-common () {position: absolute; box-sizing: border-box; content:'; pointer-events: none;} .hairline (@ color: @ border-color) {.hairline (); top:-50%; right:-50%; bottom:-50%; left:-50%; border: 0 solid @ color; transform: scale (0.5);}

It is also the first solution.

Ant-design-mobile component library

Skip to github to view the relevant code

Scale-hairline-common (@ color, @ top, @ right, @ bottom, @ left) {content:'; position: absolute; background-color: @ color; display: block; z-index: 1; top: @ top; right: @ right; bottom: @ bottom; left: @ left;} .hairline (@ direction, @ color: @ border-color-base) when (@ direction = 'top') {border-top: 1PX solid @ color Html:not ([data-scale]) & {@ media (min-resolution: 2dppx) {border-top: none; &: before {.scale-hairline-common (@ color, 0, auto, auto, 0); width: 100%; height: 1PX; transform-origin: 50% 50%; transform: scaleY @ media (min-resolution: 3dppx) {transform: scaleY;} .hairline (@ direction, @ color: @ border-color-base) when (@ direction = 'right') {border-right: 1PX solid @ color; html:not ([data-scale]) & {@ media (min-resolution: 2dppx) {border-right: none &:: after {.scale-hairline-common (@ color, 0,0, auto, auto); width: 1PX; height: 100%; background: @ color; transform-origin: 100% 50%; transform: scaleX (0.5); @ media (min-resolution: 3dppx) {transform: scaleX Hairline (@ direction, @ color: @ border-color-base) when (@ direction = 'bottom') {border-bottom: 1PX solid @ color; html:not ([data-scale]) & {@ media (min-resolution: 2dppx) {border-bottom: none; &: after {.scale-hairline-common (@ color, auto, auto, 0,0); width: Height: 1PX; transform-origin: 50% 100%; transform: scaleY; @ media (min-resolution: 3dppx) {transform: scaleY (0.33);} .hairline (@ direction, @ color: @ border-color-base) when (@ direction = 'left') {border-left: 1PX solid @ color Html:not ([data-scale]) & {@ media (min-resolution: 2dppx) {border-left: none; &: before {.scale-hairline-common (@ color, 0, auto, auto, 0); width: 1PX; height: 100%; transform-origin: 100% 50%; transform: scaleX @ media (min-resolution: 3dppx) {transform: scaleX;} .hairline (@ direction, @ color: @ border-color-base, @ radius: 0) when (@ direction = 'all') {border: 1PX solid @ color; border-radius: @ radius; html:not ([data-scale]) & {@ media (min-resolution: 2dppx) {position: relative Border: none; &:: before {content:'; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1PX solid @ color; border-radius: @ radius * 2; transform-origin: 00; transform: scale (0.5); box-sizing: border-box Pointer-events: none; / / @ media (min-resolution: 3dppx) {/ / width: 300%; / / height: 300%; / / border-radius: @ radius * 3; / / transform: scale

This is worth studying, which is a little different from vant and the first solution, mainly in that it deals with two cases with DPR of 2 and 3, which is more perfect.

Here the PX is capitalized, in order to prevent the plug-in from converting px to rem and other units.

At this point, I believe you have a deeper understanding of the "case analysis of mobile 1px problems in html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.