What is viewport and px in depth? Mobile End Unit Px,em,rem

Just started to touch the mobile page refactoring, is not very confused how much size should be made? 320, 640 or 720? Do you need to write other sizes to fit different screen sizes when you refactor the pages according to the 640 design? - This stems from a viewport and px understanding .

A lot of mobile pages have been refactored, but it's unclear why you should design the page in 640 size. Give the element a fixed pixel value, but the strange thing is that it looks pretty much the same size on different phones, and it's really cool not to have to fit in. Why? I don't know, yes.

- This stems from a viewport and px understanding .

First of all, the process of learning the mobile page refactoring may have seen some of the confused abandoned units:

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

Next, we introduce the following categories:

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

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

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

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

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

Absolute length units: in (inch inch), cm (cm), mm (mm), pt (LB), PC (PICA). In, CM, mm, and actual units are identical. PT is a commonly used unit in standard printing, and the length of the 72pt is 1 inches. The PC is also a printing unit, with a 1pc length of 12 lbs. Absolute length units, although easy to understand, are seldom 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 a horizontal portrait, in px,1px=1 pixels. The resolution of a phone, such as 1960*1080, is generally expressed in portrait pixels * transverse pixels. (the 1 pixels here are worth 1 pixels of the physical device)

Screen pixel density:

The number of pixels that can be displayed per inch on the screen, in units of PPI, which is the abbreviation for "Pixels per inch". Screen pixel density is related to screen size and screen resolution, in the case of single change, the smaller the screen size, the higher the resolution, the greater the pixel density, the lower the inverse.

The most obvious is the difference between iphone 3GS and iphone 4. Screen size is the same, screen resolution is one-fold, screen pixel density is also a 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 dots that can be displayed on the screen, that is, the screen pixel density.

The dpi:dots per inch, originally used to measure the density of dots per inch on a print, is how many points a printer can make in an inch. When the concept of DPI is used on a computer screen, it is called the PPI. PPI and DPI are the same concept, Android prefers to use Dpi,ios compared to using PPI.

DP, DIP:DP and dip are density independent pixels abbreviations, density independent pixels, can be imagined as a physical size, so that the same settings on different phones display the same effect appears to be the same.

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

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

Sp:scale independent pixels, the usage is similar to DP, is specifically used to define the text size, affected by the user's Android device font settings.

PX: This is what is commonly said to be pixels, making the most of the length units used in a web design. Divide the display into very small squares, each of which is a pixel. (PX and screen resolution PX used in Web refactoring are not necessarily the same size.) ）

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

Google's official designation distinguishes the DPI of different devices according to the following criteria:

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

From a numerical perspective, Apple and Android have this correspondence:

The unit is finished. Summarize how to make us understand our work better. when we refactor the mobile page using PX is actually the same as using DP in Android development , there is a factor behind that will help us to match the size of this phone. And this factor is 1x, 2x, 3x ... How does this factor come about? Depends on the resolution and screen size to calculate the screen pixel density, and then see the screen pixel density belongs to which coefficient level.

The above is the introduction of units, 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 viewable area of the phone, the general phone default viewport larger than the viewable area. This does not break the layout of pages that are not optimized for mobile browsers, and users can view other parts of the page by panning and zooming.

Some models default viewport size:

We may set viewport like this:

Each setting corresponds to:

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

The unit PX used in Web page refactoring, which is commonly referred to as pixels, is the most used length unit in web design. Divide the display into very small squares, each of which is a pixel (which 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 not set viewport, he will default is 980px, just like the screen into 980 parts (not the screen resolution of 640px Oh!). ）。 If you set an element to 100px*100px, it appears to be 100/980 of the screen, as shown in:

For example iphone4s if set viewport width=device-width, he will be 320px, just like the screen into 320 parts (not the screen resolution of 640px Oh!). ）。 If you set an element to 100px*100px, it appears to be 100/320 of the screen, as shown in:

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

Set the Viewport,width=device-width, bounce out is the width of the set, 375px, 360px, 320px. Why is this size? This will use the above knowledge point.

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

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

The red block in the page gives the 200*200px a look that looks almost as big as a few devices.

(On the left is the Samsung Note4, the right is red rice 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 seems that the red block on the left is significantly larger than the right side, because the device on the left is large, although both are divided into 360 parts, but the 1 parts on the left are significantly 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 phones can actually look almost the size, but also understand that we do not need to write other sizes to fit different screen sizes. I don't know what I'm going to do.

For the size should be based on the design of mobile Web pages, this look at designers like, 640 is the mainstream, because a lot of designers use iphone4s, 5S. Now it's slowly turning 750 because the iphone is upgraded to 6. Regardless of the size of the design draft, refactoring can be used 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 refactoring, and then use JS to determine the screen size for page scaling, there is no problem, can smoothly adapt to other mobile phones. The important premise is to set up the correct viewport.

What is viewport and px in depth? Mobile End Unit Px,em,rem