CODEWITHSUNDEEP
css
T.Liu
T.Liu

Reputation: 512

How is the rem unit rendered in CSS?

About the rem unit introduced since CSS3, is it rendered only when a page refreshed? If resizing a web page for responsive testing, will a text, whose font size is defined as the rem unit, also be resized dynamically?

Upvotes: 1

Views: 900

Answers (2)

Chaaampy
Chaaampy

Reputation: 263

The rem size is based on your html font-size. Look at the code below (or this fiddle).

HTML :

<p>
  Lorem
</p>

<p>
  Ipsum
</p>

<p>
  Dolor
</p>

<p>
  Sit
</p>

<p>
  Amet
</p>

CSS :

html {
  font-size: 24px;
}

p:nth-child(1) {
  font-size: 1rem;
}

p:nth-child(2) {
  font-size: 2rem;
}

p:nth-child(3) {
  font-size: 3rem;
}

p:nth-child(4) {
  font-size: 4rem;
}

p:nth-child(5) {
  font-size: 5rem;
}

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
}

Upvotes: 0

s-f
s-f

Reputation: 2141

rem references to the root font size defined in html element. So if you change your font-size dynamically the elements will be resized, otherwise not.

Upvotes: 4

Related Questions