CSS Font size units

Source: Internet
Author: User
Tags css zen garden


This should be a domestic use of more units, meaning pixels. Therefore, the visual rendering effect is related to resolution. For example, in the 1024x768 resolution to see the 12px font than 960*640 see the "small", in fact, the font pixel has not changed, so feel at high resolution to small, in low resolution to large. the default browser uses 16px rendering.

If you set the font unit to%, for example: font-size:120%, then 16px*120%=19px;


Compared to domestic, foreign sites are more inclined to use EM, not only on the font-size, in the margin and padding, etc. will also be used, such as well-known CSS design site-css Zen Garden, http://www.csszengarden.com/. 1em=16px the size of the child element's EM is not specific, the child element's EM is calculated on the basis of the parent element, for example: The parent element is 2EM, the child element is 1em, the child element font size is 1 (child) * * (parent) =2em; the parent element is 2EM, the child element is 2EM, The child element font size is 2 (parent) * * (Child) =4em as follows:

. div2{


REM is a new way of defining the font size that CSS3 appears, and its difference from EM is that REM is always relative to the HTML element (HTML), not relative to the parent element. As follows:

html{       font-size:1em;      }      . div2{        font-size:2rem;/*1 (root element) * * (OWN) =2em (actual size) */      }      p{        font-size:1rem;/*1 (root element) * * (OWN) =1em (actual size) */



PT does not change visually as the resolution of the browser changes, it always looks the same size.

CSS Font size units

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.