[Mobile adaptation] How to implement a pixel border and adapt it to a pixel border

[Mobile adaptation] How to implement a pixel border and adapt it to a pixel border

A complex and disturbing world in pixels

Text | Mr. Chew Mar.3rd. 2016 first published on the Public Account (Mr. Chew)

In the previous article, I published "[mobile adaptation] HOW TO MAKE screen adaptation for mobile Web".

 

1 | Fisrt

In the world of CSS, Px is an atomic operation. We cannot define that the Border width is 0.5px, and the minimum is 1px. Therefore, we have the following conclusions:

Second | Second 

So what is 1px in CSS? How does a browser render it?

A webpage is rendered in a thing called viewport. It can be understood as a canvas. The canvas is divided into N x M small squares, and one CSS pixel is a small square.

What is viewport?

When a webpage is rendered on the viewport, you can imagine that when you draw something on PS, there is also a canvas on it, which separates N x M squares and N is its width, M is its height. You can set either width or height. Therefore, viewport is virtual. If the width is set to 400, the horizontal display area of the browser will be divided into 400 parts, and the 1px width of CSS is 1/400 of the display area. For example, 980 is 1/980.

The Effect of Different viewport values on the page element width

When you look at a page, you can only modify the width of the viewport without moving any other code. What changes have taken place on the page?

The Code is as follows:

Viewport = 500

 

Viewport = 900

 

We only analyze the image of the user's profile picture. It is known that the profile picture width is 50px.

• When the viewport width is 500, the screen is divided into 500 parts horizontally, each 1 px, so the Avatar width is 1/10 of the screen. (500/50 = 10)

• When the viewport width is 900, the screen is divided into 900 parts horizontally, each 1 px, so the Avatar width is 1/8 of the screen. (900/50 = 18)

Therefore, in CSS, 1px is a small square in the viewport, And the viewport width can be set arbitrarily.

 

3 | Third

So how can we reasonably set the viewport width?

The viewport width can be a number and a string "device-width ". Device-width indicates the device width.

• When the value is a number, no matter what mobile phone screen, viewport is divided into so many

• When the value is device-width, the viewport width of the mobile phone screen is set to the same as the mobile phone width. How is the width calculated?

Device-width Algorithm

First, clarify several key terms:

• Physical pixels:When buying a mobile phone, there will be a resolution of n * m, that is, the screen's n * m image points, a point (small square) is a physical pixel. It is the minimum granularity for display on the screen.

• CSS pixels:It is the Px in CSS. As mentioned above, it is a small square in viewport.

• Pixel density: dpi or ppi,The physical pixels occupied by each inch of the screen.

 

CSS pixels have a conversion relationship with physical pixels. That is:

The calculation process of the conversion system is as follows:

Table of density regions and conversion coefficients of Android

Table of iPhone density regions and conversion coefficients

 

(Statement: The above three pictures from http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml)

For example, for an Android phone, the resolution is 1920*1080, and the screen object line is 5 inch. So how many physical pixels does one CSS pixel count on this mobile phone?

 

Step 1: Calculate the resolution of the diagonal line by using the hook theorem, that is, √ (1920 + 1080) ≈ 2203px

Step 2: Calculate the dpi. Diagonal resolution/diagonal inch = 2203/5 ≈ 440 dpi

Step 3: Obtain the conversion coefficient. According to the picture above, the Android phone is 440 dpi, which belongs to XXHDPI and the conversion coefficient is 3.

Therefore, one CSS pixel in this phone is 3 x physical pixel. That is, one CSS pixel occupies three physical pixels.

This conversion coefficient is also equivalentDpr, Device pixel ratio.

 

Obviously, the unit of the width value of device-width is CSS pixel.Therefore, when viewport is set to device-width, It is the horizontal resolution/conversion coefficient of the mobile phone. That is:

In the preceding example, the device-width of the Android mobile phone is 1080/3 = 360, that is, the viewport width is 360 CSS pixels.

However, setting viewport to a fixed number may damage the conversion relationship. We recommend that you set the viewport width to device-width, in this way, one CSS pixel is as much as possible as the physical pixel of dpr.

 

Si | Fourth

Why is a border thinner than border-width: 1px?

The minimum granularity displayed on the screen is one physical pixel. When the viewport width is set to device-width, the physical pixels occupied by one CSS pixel are determined by the conversion coefficient. Therefore, on a high-definition screen like iPhone 6, the conversion coefficient is 3 and the border-width: 1px. The border occupies three physical pixels. If the width of a border can be 1 physical pixel, It is finer than 1 CSS pixel, and the border at the beginning of this article is finer becauseAfter special processing, only one physical pixel is occupied.

 

One CSS pixel occupies one physical pixel.

• Method 1: scale of viewport

In the viewport attribute, in addition to setting the width and height of the width, there is also a scaling scale.

When the scale is 1, the page size is normal, but when the scale is 0.5, the page is reduced by one time. Originally, the width of one CSS pixel occupies two physical pixel widths, the reduced border-width: 1px occupies only 1 physical pixel. The Code is as follows:

The initial-scale value is 1/dpr.

Advantages:

1. You don't need to write a lot of style code for border, just like the original border: 1px solid # D5D5D6.

2. You can easily set the border-radius.

Disadvantages:

1. The entire page is reduced. The side effect is that the size margins of fonts, images, and other elements are reduced in the same proportion. In this case, set viewport to dpr * document.doc umentElment. clientWidth, and then combine it with my previous article "[mobile adaptation] how to make screen adaptation for mobile Web (1.

• Method 2: transform scale

The first method is to scale the entire page. In the CSS3 standard, you can scale an element. For example, if a div. border-top is set to the following style, the top of the DIV has a border

.border-top{position: relative;border-top: none !important;}.border-top:after {    content: " ";    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 1px;    background-color: #D5D5D6;    -webkit-transform-origin: 0 0;    -ms-transform-origin: 0 0;    transform-origin: 0 0;    -webkit-transform: scaleY(0.5);    -ms-transform: scaleY(0.5);    transform: scaleY(0.5);}

Add a content with a height of 1 px to the end of the DIV and reduce the size of dpr by 1/2.

The advantage is that the whole page does not need to be scaled. The disadvantage is that there are many border codes and border-radius rounded corners cannot be implemented.

 

Writing is on the verge of collapse ..

 

1. Deep understanding of viewport and px (http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml)
2. A tale of two viewports (http://www.quirksmode.org/mobile/viewports.html)

The adaptation problem has not been completed yet, but the smelly and long pure technical text is too hard. In the next period, you may have some time to talk about the story.

It is not easy to know the code word at the beginning, and it is difficult to stick to the code word. Reprinted, please declare the source

If the article is useful, clickRecommendation