CODEWITHSUNDEEP
css
user3568783
user3568783

Reputation:

My application uses rem values. How can I relate this to pixels?

My browser width is 1440px and I would like to make an element that's just a bit smaller than the width of the browser screen. So just a bit smaller than 1440px.

Can someone explain to me the way pixels relate to rem? How does my browser decide the number of pixels in a rem unit?

Upvotes: 1

Views: 101

Answers (2)

strah
strah

Reputation: 6722

Why not use % instead? rem/em are units relative to the font size, not screen size.

In your case you may want to do:

width: 95%;

or

width: calc(100% - 10px);

depending on what exactly is your need.

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99484

Can someone explain to me the way pixels relate to rem? How does my browser decide the number of pixels in a rem unit?

rem stands for root-em which is the font-size of the root element. In HTML the root element is <html>. UAs usually apply a font-size of 16px to html, Therefore 1rem would be equal to 16px in that case.

5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units

Aside from ‘rem’ (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used [...]

rem unit Equal to the computed value of ‘font-size’ on the root element.

When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property's initial value.

And the initial value of font-size is medium.

Upvotes: 2

Related Questions