Px,em,rem

Source: Internet
Author: User

PX: pixels are relative length units relative to the display screen resolution. PC side use PX Pour also does not matter, but in the mobile side, because the mobile phone resolution kind of a lot of, impossible to fit each other, at this time PX appears very weak, so must consider EM and REM.

EM: Inherit the parent, assuming that the HTML font-size default to 16px,body font size is defined as 50%, then the font size in the body is 1em=8px. But when you define a div, and then set the font to 50%, ask, now div 1em equals how much? Because inherited the value of the parent, now this div in the 1em=4px, so nested down, I'm sorry, I'm not good at maths! All REM appeared.

REM: is an upgrade of EM, REM will only be relative to the value of HTML, will not be affected by the parent, the advantage is: From the EM example, 1rem will always be equal to 8px. It is not necessary to recalculate the size of REM at this time. REM because it is CSS3 increase, so IE8 or below please ignore (always want to not understand, why people so far to Microsoft have abandoned IE so reluctant).

The above is also to clarify the difference between them and the relationship between the REM more used in mobile H5 page adaptation use.

Px,em,rem

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.