1

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?

  • http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css – Pau Nov 01 '14 at 13:12
  • Try `calc(100% - 10px)` – vsync Nov 01 '14 at 13:14
  • 1
    Pixels relate to `rem` in a manner that depends on the root element font size. This directly follows from the definition of `rem`. So it is unclear what you are really asking. To make an element a bit smaller than 1440px, set it to 1439px. If you set in `rem` units, it will always depend on the root element’s font size, which will always ultimately depend on the browser and its settings. – Jukka K. Korpela Nov 01 '14 at 13:30

2 Answers2

2

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.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
0

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.

strah
  • 6,702
  • 4
  • 33
  • 45