Android multi-screen size adaptation principle

Html px em pt font size unit

Define the font size on the page there are three generic classes of units, px, em, pt

px

It is the abbreviation for pixel px, a change in the resolution of the unit pixels in the course of browsing, text on the screen, with the screen images and the like will vary based on, a 100px width size image at a resolution of 800 × 600, to accounting for 1/8 the width of the screen, but in the 1024 × 768, is only about 1/10. So if when you define the font size, use px as a unit, and that once the user to change the display resolution from 800-1024, the user will actually see the text change "small" (natural unit of length), or even see, the impact browsing.

in

em:% i.e., a relative unit, is a relative unit of length is the width of the initial letter M, named em. Now it refers to a multiple of the width of the character, similar to the percentage of usage, such as: 0.8em, 1.2em, 2em like. Usually 1em = 16px. Generally used to measure the common unit (e.g., element turnover margins and padding) length, when used to specify the font size, em unit refers to the font size of the parent element.

On one page a given font size of the parent element, so that you can be to alter the proportion of all elements by adjusting the size of an element. It can be freely scaled, such as used to make scalable style sheets.

pt

PT is Point (lb) abbreviation, is a fixed-length unit of measure, the size of 1/72 of an inch. If you are using the web to do in pt units of text, font size as in the different screen (same resolution), so that might affect the layout, but using pt in Word quite convenient. Because the main purpose is not to use Word to browse screen, but the printed output. When printing to the entity, pt as a natural unit of length on the convenient and practical: for example, Word documents are in common use "Times New Roman 9pt", Title "in bold 16pt" use and so on, no matter how computer settings, print it out forever is so big .

Change

The browser's default font height is 16px, so the unadjusted browser display 1em = 16px, that is 1px = 0.0625em. To simplify font-size conversion, you can css in the body of the first global declaration font-size = 62.5%, which is defined in the default font size is 16px * 0.625 = 10px, child elements will inherit the parent element's font size, Thus 1em = 10px, so 12px = 1.2em. em px and conversion can be obtained by 10. However, font-size = 0.625em defined or defined directly 12px, which had no effect. link

Android developers a common unit of measure

inch

1 inch is equal to about 2.54 cm, is mainly used to describe the size of the mobile phone screen.

DPI/PPI 

DPI = Dots Per Inch 

 PPI = Pixel Per Inch  

The difference is that the difference between two parameters of Pixel and Dot, dot value per a physical point on the display, and the pixel refers to a minimum unit in resolution of the screen. The two will not do the same? meeting! When more than one pixel requires a physical point on the screen to display just when the pixel is not the same dot. There is another name for this is called dppx (dot per pixel), that is, each pixel how many points. Most display a pixel that is a point, but some of the better screen and some cell phone screen dppx will be greater than 1. For example, Mac Retina, iPhone, HTC One and so on. I believe we have encountered some of the computer screen, it looks always so stupid silly big. Because they cause ppi resolution turned too low, and let the picture looks so incongruous. Look at the following two pictures, I am on a 1366x768 resolution monitor the effect of the resolution are set to 1366x768 and 1024x768 displayed. 

 1024 x 768 

 1366 x 768  

But most cases we did not put two nouns points so clear, so when the two appear if the expression is basically the same thing, that is PPI (how many pixels per inch). 

The PPI = the number of pixels of the screen diagonal / diagonal length of the screen = (√ (horizontal screen pixels ^ 2 + 2 ^ screen vertical pixels) / diagonal length)

For example: if a cell phone screen resolution of 720px * 1280px, 4.3 inches. The dot density is √ (720 ^ 2 + 1280 ^ 2) /4.3 = 342ppi. link

Resolution 

Resolution of the word in many places, such as cameras, video scanners. Here that is the resolution of the display. Displays are composed of one pixel (pixel) composed generally of said display resolution is 1280x720 display would indicate that there are 1280 pixels in the horizontal direction, 720 pixels in the vertical direction. But not the higher the resolution the better screen display, also you need to be determined according to the size of the screen. That is to look at the density of pixels (pixel density), this indicator is the DPI (Dots Per Inch) or PPI (Pixels Per Inch), that is, the pixels on the screen or feet is the number of points.

Screen density

The phone's screen density is usually refers to the phone screen dpi (dots per inch), which is the number of pixels per inch. For Android phones, there are several common dpi:

1. ldpi: corresponding to the range of 0 to 120 dpi, i.e. per inch screen density 0-120 screen pixels belong ldpi

2. mdpi: dpi range from 120 to 160

3. hdpi: dpi in the range of 160 to 240

4. xhdpi: dpi in the range of 240 to 320

5. xxhdpi: dpi range of 320 to 480

6.xxxhdpi: dpi in the range of 480 to 560

In the actual development, typically dpi 120,160,240,320,480 values ​​refer respectively ldpi, mdpi, hdpi, xhdpi, xxhdpi. The greater density of mobile phone screen is usually displayed image will be more delicate. You can get the current screen density Android device by the following code:

private void getDpi() {DisplayMetrics dm = getResources().getDisplayMetrics();Log.i("TAG", "density = " + dm.density);Log.i("TAG", "densityDpi = " + dm.densityDpi);}复制代码

If we run a screen density of 320dpi above code on Android phone, you will get the following output:

density = 2densityDpi = 320复制代码

        The output is above densityDpi dpi value Android phone screen, then what density is it? In fact it represents the ratio of dpi dpi value and the reference value of the current screen, the reference value is 160 dpi.

dp(dip)

        Density-independent pixel, Andrews develop with length unit, 1dp represents the screen when the pixel density is 160ppi 1px length. We mentioned above 160 dpi is selected as the reference screen density, the density of the reference screen artificially established relationship between dp and px: dpi in device 160 is on Android, 1 dp = 1px. Suppose x is a UI control to px units of size, y is the same UI controls dp units of size, densitydpi represents screen density, then x relationship with y as: x = y * densityDpi / 160 or x = y *  Density . Accordingly, the resolution can also be calculated as 1080x1920, the screen density of 480dpi dp device to a high value in units of width, width: 1080/3 = 360dp

Height: 1920/3 = 640dp , when we pay attention to the width of the design of the control value can not exceed the maximum width of the device.

sp

Before introducing sp, let's take a look together TypedValue user class contains the dp, sp converted to other units of px static methods:

public static float applyDimension(int unit, float value,DisplayMetrics metrics) {switch (unit) {case COMPLEX_UNIT_PX:return value;case COMPLEX_UNIT_DIP:return value * metrics.density;case COMPLEX_UNIT_SP:return value * metrics.scaledDensity;case COMPLEX_UNIT_PT:return value * metrics.xdpi * (1.0f/72);case COMPLEX_UNIT_IN:return value * metrics.xdpi;case COMPLEX_UNIT_MM:return value * metrics.xdpi * (1.0f/25.4f);}return 0;}复制代码

To convert dp px, would execute the following code:

return value * metrics.density;复制代码

        density we introduced earlier, the ratio of dpi refers to the current and the reference dpi (160.) a. is the current density is calculated by dividing the screen of 160 dpi. In other words, the screen dpi is 120,160,320,480, density values were 0.75,1,2,3.
To convert sp px, the code will be executed as follows:

return value * metrics.scaledDensity;复制代码

        It can be seen as similar to when the formula for calculating the dp px converted px sp conversion, then what scaledDensity is it? In fact, different from scaledDensity density, scaledDensity can be changed dynamically when the user changes the font scaling Android devices, scaledDensity value will change. ScaledDensity calculated as: scaledDensity = density * fontScale. FontScale which represents the user's Android device to set the font scaling, the default is 1. That is, when the user does not change the Android device font scaling, sp, dp px and the conversion is the same.

Change the density, scaledDensity and resolution in the Android system settings menu

Usually we do in the UI to fit the page, it will go to a lot of different Android devices, in fact, we only need to go to the system menu to set density, scaledDensity and resolution of these parameters, then you can on an Android device see page show the effect on different Android devices to huawei mate8 phone, for example, enter the system setup menu display items:

Change the density and resolution by ADB shell command

View supported at the terminal input adb shell wm command set:

Change and view density command:

Change the resolution and view command:

Reproduced in: https: //juejin.im/post/5cf1fa70f265da1bb31c207e