Mobile End Unit Resolution

What does a mobile-phone development unit use?

There are currently 3 species, Px,em, rem

Most of the PC is in PX units, a small part with EM units, and mobile, please use all REM units. Most devices today, including but not limited to iOS 5+, Android 2.3+, Window Phone 8+, are compatible.

What is REM?

Relative length units, relative to the root element (that is, the HTML element) Font-size a multiple of the value.

REM usage is simple: After the root tag HTML is set to text size (not set, most browsers default to 16px), other tags set rem are multiples of the HTML size.

html{

font-size:10px; /* Set HTML to 10px */

}

h1{

Font-size:2rem; /* 10px*2=20px */

}

So why should the mobile end use REM as a unit? First, I started to mention that the majority of mobile support, do not need to consider compatibility issues, the second is flexible to modify. If you want the entire page font to be twice times larger, modify html{font-size:20px} directly.

You will certainly say, Baidu Google search out of the article, most of it is let set to html{font-size:62.5%}. His role is to set the HTML to 10px, but in case which browser 2b upgrade to the default text size is not 16px what to do? And can be directly set to 10px, why to use 62.5% to calculate 10px? It's not about taking off your pants, farting? So I was set directly 10px. -----------(10px) ÷ (16px) x100% = 62.5%

If I only introduce this thing, I will not write this article if I search a lot of internet. The key is the large-scale use of the bug, but also the egg-ache native chrome ... Chrome on the iOS platform is no problem, it is said that all browsers in iOS are shells ...

Mobile End Unit Resolution