The relationship of Px,em,rem

Source: Internet
Author: User

Before I heard people say, the website production of font units should use EM instead of px, why? The simple reason is that EM supports font scaling under IE6, press CTRL + SCROLL wheel in the page, and the Web site with the PX unit does not respond. PX is an absolute unit that does not support IE scaling, while EM is a relative unit that supports font scaling.


And REM is a better thing. If there is no IE8-compatible concern (REM requires ie8+ support, REM is suitable for multilingual templates), REM can be said to be a very desirable unit. REM and EM are the same relative units, just different from EM relative to the parent element, Rem relative to the root element html, i.e. root em.
We often see html{font-size:62.5% in web design;} Why is this setting 62.5%? This is mainly to facilitate the conversion between the EM and PX, the initial value of EM is 1em=16px, when set html{font-size:62.5%;} , 1em =16px*62.5%=10px,1.2em is =12px, so it is much simpler and clearer.

Summary: REM is a relatively flat, cascaded unit of computing based on the root element , typically for scenes that require overall resizing of the font, such as a multilingual website.

The relationship of 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.