- The size of other content on the website.
- The size of the screen the website is being viewed on.
Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as
em in CSS..p { font-size: 2em; }
Here, no base font has been specified, therefore the font size of the
paragraph element will be set relative to the default font size of the browser.
Assuming the default font size is 16 pixels, then the font size of the heading element will be 32 pixels.Rem
Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the root element. The root element is the <html> tag.
html { font-size: 20px; }
h1 { font-size: 2rem; }
Here, font-size of whole html tag to 20px. So, font-size of Heading will be 40px.
One advantage of using rems is that all elements are compared to the same font size value, making it easy to predict how large or small font will appear.
No comments:
Post a Comment