Establishing the REM value for all CSS properties

Question

Establishing the REM value for all CSS properties

My goal is to implement the use of rem units throughout my website. However, relying on the standard rem-to-px conversion rate doesn't feel very intuitive:

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

To address this issue, I have opted to use html { font-size: 62.5%; }, which establishes a 1rem = 10px conversion for font sizes. But how does this approach translate when setting margins, paddings, borders, etc. according to the same conversion rate?

Any insights would be appreciated!

html css

Answer 1

Answer №1

We have discussed this in the comments, but essentially, the solution is to adjust the base font size to 10px instead of 62.5%.

html { font-size: 10px; }

From now on, all your rem values will be based on 1rem equaling 10px, making your calculations much simpler.

1.5rem = 15px
2rem = 20px

...and so forth.

Now using margin: 1rem will truly mean margin: 10px.

Answer 2

We have discussed this in the comments, but essentially, the solution is to adjust the base font size to 10px instead of 62.5%.

html { font-size: 10px; }

From now on, all your rem values will be based on 1rem equaling 10px, making your calculations much simpler.

1.5rem = 15px
2rem = 20px

...and so forth.

Now using margin: 1rem will truly mean margin: 10px.

Answer 3

Answer №2

By setting the font-size at the root level using an absolute unit, you are essentially overriding the user's browser settings, which are typically set to a default of medium (16px). It is recommended to use a relative unit instead.

// Use /* for comments in CSS
// 1rem equals 10px
// Calculating 62.5*16px(base) = 10px
html {
  font-size: 62.5%; // This will adjust when the user changes their browser font size
}

Answer 4

By setting the font-size at the root level using an absolute unit, you are essentially overriding the user's browser settings, which are typically set to a default of medium (16px). It is recommended to use a relative unit instead.

// Use /* for comments in CSS
// 1rem equals 10px
// Calculating 62.5*16px(base) = 10px
html {
  font-size: 62.5%; // This will adjust when the user changes their browser font size
}

Establishing the REM value for all CSS properties

Answer №1

Answer №2

Similar questions

The Hamburger Menu Opens Smoothly But Refuses to Shut Down

Developing a HTML button through Javascript that triggers a method with a single parameter when clicked

Regular expression for capturing multi-line HTML comments using preg_match_all

Updating text color with Ajax response value

The autoComplete feature in my ReactJs form is not functioning properly

The JSP page is unable to locate or access relative resources such as CSS stylesheets and images

React modal image showing a misaligned image upon clicking

Enclose several lines of text within a border in the midst of other content

ul background transparency only works with absolute positioning if using a Transparent PNG

Horizontal scrolling overflow disrupts vertical overflow visibility

What is the best way to define the width of text inside a div block?

What strategies can I use to prevent any spaces between cards when I unfold them?

What is a creative way to design a mat-radio-group without traditional radio buttons?

Leveraging jQuery functions with dynamically generated DOM elements in JavaScript

What could be causing my jQuery handler to not capture my form submission?

CSS techniques for arranging images with varying sizes into a tiled layout

When there is an absence of data, the jQuery datatable mysteriously van

Using a custom function, automatically initiate audio playback when an Android WebView JS loads

What is the best way to align div elements side by side while using a flex direction of column?

Ways to eliminate the lower boundary of Input text