Take you deep into your study of viewport and PX.

Today this Tencent game seven treasure classmate of dry goods, not only to the students of absolute/relative length units, screen size/resolution/pixel density, ppi/dpi/sp/px, and a series of basic terminology, but also the most important to move the page to reconstruct the knowledge point viewport in-depth explanation, the whole professional dry goods, Designer, Collect!

Just start to contact mobile page refactoring, is not very confused should be according to how large size production? 320, 640 or 720? After you have reconstructed the page according to the 640 design, is it necessary to write other sizes to fit the different screen sizes?—— This is due to the viewport and px of the understanding.

I've refactored a lot of mobile pages, but I don't know the answer to why I want to design the page in 640 size. Give the element a fixed pixel value, but it's strange that it looks almost the same size in different phones and doesn't need to be adapted. Why, I don't know, yes. -This stems from the viewport and px of the not understanding.

The first to list the following learning Mobile page refactoring may have seen some of the units have been confused abandoned:

PX, PT, PC, SP, EM, REM, DP, dip, PPI, dpi, ldpi, MDPI, hdpi, xhdpi, xxhdpi ...

　The next category for you to introduce the following:

① what is an absolute length unit? What is the relative length unit?

② What is screen size, screen resolution, screen pixel density?

③ What is PPI, DPI, DP, dip, SP, px? What is the relationship between them?

④ What are mdpi, hdpi, xdpi, xxdpi? How to calculate and differentiate?

1, what is absolute length unit? What is the relative length unit?

Absolute length units: in (inch inches), cm (cm), mm (mm), pt (LB), PC (PICA). In, CM, mm and the actual common units are exactly the same. PT is a commonly used unit in standard printing, with a length of 72pt of 1 inches. The PC is also a printing unit, with a 1pc length of 12 lbs. Absolute length units, though easy to understand, are rarely used in the design of Web pages. So let's just ignore them.

Relative length unit: is the most used length unit in web design, including px, EM, REM and so on.

2, what is screen size, screen resolution, screen pixel density?

Screen size: Refers to the length of the diagonal of the screen, in inches, 1 inches = 2.54 centimeters. Common screen sizes are 2.4, 2.8, 3.5, 3.7, 4.2, 5.0, 5.5, 6.0, and so on.

Screen resolution: Refers to the number of pixels in the horizontal portrait, the unit is px,1px=1 pixel points. Generally in portrait pixel * transverse pixel to represent the resolution of a mobile phone, such as 1960*1080. (This 1 pixel is worth 1 pixels of the physical device).

Screen pixel density: The number of pixel points that can be displayed per inch on the screen, in terms of PPI, the abbreviation for "Pixels each inch". Screen pixel density is related to screen size and screen resolution, under a single change, the smaller the screen size, the higher the resolution, the larger the pixel density, the smaller the opposite.

The most obvious is the difference between the iphone 3GS and iphone 4. Screen size, the screen resolution is one-fold, screen pixel density is also one-fold difference.

Formula for calculating pixel density:

The Pythagorean theorem calculates the diagonal resolution: √ (1920²+1080²) ≈2203px

Diagonal resolution divided by screen size: 2203/5≈440dpi.

3, what is PPI, DPI, DP, dip, SP, px?

Ppi:pixels per inch, the number of pixel points that can be displayed on the screen, that is, the pixel density of the screen.

Dpi:dots per inch, originally used to measure the density of dots in each inch of the print, is the number of points a printer can hit in an inch. When the concept of the DPI is used on a computer screen, it is called PPI. PPI and DPI are the same concept, and Android prefers to use Dpi,ios rather than using PPI.

DP, DIP:DP, and dip are all abbreviations of the density independent pixels, the density independent pixel, which can be imagined as a physical dimension, making the same settings appear the same on different phones.

In Android, the rule is to use 160dpi as the benchmark, 1dp=1px. If the density is 320dpi, then 1dp=2px, and so on.

Both Android and iOS use the conversion factor to adapt the control to the size of the screen. A button gives the 44*44DP the size of the 44*44px, at 160dpi density, the button is the size of the 88*88px, and the button is the size of the 320dpi density. We don't need to write multiple sets of dimensions.

Sp:scale independent pixels, which is similar to DP, is designed to define the size of the text and is affected by the font settings of the user's Android device.

PX: is usually called the pixel, so that the page design to use the most units of length. Divide the display into very small squares, and each square is a pixel. (PX and screen resolutions used in Web refactoring are not necessarily the same size.) )

4, what is MDPI, hdpi, xdpi, xxdpi?

Google official specifies that the DPI of different devices be differentiated according to the following criteria:

Apple's distinction is more simple: non-high-definition screen, Gaoqing, Super high-definition screen.

In numerical terms, Apple and Android have this correspondence:

The unit is finished. Summarize how to make us understand our work better. When we refactor mobile pages, using PX is the same as using DP in Android development, and there is a factor behind it that will help us to fit the size of the phone. And this coefficient is the above figure 1x, 2x, 3x ... How does this factor come about? The pixel density of the screen is computed by the resolution and screen size, and then the pixel density of the screen depends on which factor level.

The above is the unit introduction, the following to understand an important point of knowledge.

Viewpoint

Mobile browser is to put the page in a virtual "window" (viewport), the window can be greater than or less than the visible area of the mobile phone, the general mobile phone default viewport greater than the visual area. This will not destroy the layout of Web pages that are not optimized for your mobile browser, and users can view the rest of the page by panning and zooming.

Partial model default viewport size:

We might set viewport this way:

Each setting corresponds to the following:

The background image of this page is given to the background-size:100% as a background, so the whole screen is well covered and the size looks perfect. The above element uses a fixed PX value to give the size, such as the head of the upper left corner to the width:100px;height100%; Why are the two shown in this way?

The unit PX used in Web page refactoring, which is usually called pixels, is the most used length unit in web design. Divide the display into very small squares, each of which is a pixel (this is different from the 1920px*1080px px of the screen resolution we understand). Different settings, the size of the square is not the same.

For example iphone4s if you do not set viewport, he will default is 980px, like the screen divided into 980 (not the screen resolution of 640px Oh!). If you set an element to 100px*100px, it looks like 100/980 of the screen, probably as shown in the following illustration:

For example, if iphone4s set viewport width=device-width, he would be 320px, like dividing the screen into 320 parts (not 640px of screen resolution!). If you set an element to 100px*100px, it looks like 100/320 of the screen, probably as shown in the following illustration:

Not set viewport, bounce out of the device is the default width, the basic is 980px, in addition to the last Samsung classic machine is 800px.

Set the Viewport,width=device-width, bounce out is set a good width, 375px, 360px, 320px. Why is this size? This is going to use the above mentioned knowledge point.

IPhone6 's screen resolution is 1334*750px,ppi is 326, so the coefficient is 2x. That device-width is equal to 750/2=375px.

The red meter 1s screen resolution is 1280*720px,ppi is 312, so the coefficient is 2x. That device-width is equal to 720/2=360px.

The red block on the page gives the 200*200px, and in a few devices it looks like it's about the same size.

(the image on the left is Samsung Note4, the right is red m 1s)

Samsung Note4 's screen resolution is 2560*1440px,ppi is 515, so the coefficient is 4x. That device-width is equal to 1440/4=360px, and millet divice-width the same size. But it looks like the red block on the left is significantly larger than the right, because the device on the left is big, although the two are divided into 360 parts, but it is obvious that 1 of the left is larger than the 1 on the right.

This explains why the element is given a fixed pixel value, the size of the font 16px, in most mobile phones can look about the size, but also understand that we do not need to write other sizes to fit different screen size. I don't know if I can explain this turning.

For what size should be based on the design of mobile Web pages, this look designers like, 640 is the former mainstream, because many designers with iphone4s, 5S. Now it's slowly turning to 750 because the iphone is upgraded to 6. No matter which size of the design, refactoring can be a set of methods to make a good page, if the background tile (background-size:100%), the above element px set size, no problem, can be successfully adapted to other mobile phones. If it is fixed overall size reconfiguration, and then use JS to determine screen size for page scaling, there is no problem, can be successfully adapted to other mobile phones. The important premise is to set the right viewport.