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!

htmlcss

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

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
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you identify dynamically created elements within an AngularJS directive?

I have a directive where I need to target specific DOM elements, some of which are dynamically generated in an ng-repeat loop. If I try to select them directly, I only get the static elements. However, if I delay the selection by, let's say, 500ms, I ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

Entering numerous numerical values across a variety of input fields

My website currently has a form with 6 input fields where visitors need to enter a 6 digit code. To make it easier for them, I want to allow users to simply paste the code we provide into the first input field and have the remaining digits automatically po ...

javascriptjqueryhtmlformswebforms

Connecting a href link to a TAB

Check out this useful CODE example I am using. I have a webpage with links that have href attributes. Now, I want to link these pages to another page and have them automatically open a specific tab when clicked. Is this possible? Here are the links on th ...

javascriptphpjqueryhtml

Has jQuery UI Accordion taken over the design of unordered lists?

I'm having trouble with my website's navigation styling getting messed up by the jQuery accordion. The unordered list inside the .accordion div is overflowing and losing its CSS styling. I've tried adding clearStyle true and autoHeight false ...

jquerycsslistaccordion

PHP processing and converting to a string output

I have a PHP page (content.php) that includes plain HTML and content accessed via PHP variables <html> <head> </head> <body> <h1><?php echo $title; ?></h1> </body> </html> ...

phphtml

PHP pattern substitution [ replace ]

Seeking assistance with two cases involving regular expressions in HTML code editing [parsing]. I currently use a parser with the following logic (example provided below with YouTube). Select the unique fragment (ED96RtfF22E) from the source HTML code of ...

phphtmlregexreplace

The media query was running smoothly until it unexpectedly stopped functioning

I've encountered an issue where something that used to work perfectly fine suddenly stopped working :( @media only screen and (max-width: 768px) { form, button, input { width: 80vw !important; } } <meta name="viewport" content="width=de ...

htmlcssmedia-queries

Update the function to be contained in a distinct JavaScript file - incorporating AJAX, HTML, and MySQL

Currently, I am working on a project and need to showcase a table from MySQL on an HTML page. The JavaScript function in my code is responsible for this task, but due to the Framework 7 requirement, I must separate the function into a different .js file ra ...

javascripthtmlmysqlajax

Creating Radial Fades with CSS3

Seeking guidance on creating a background similar to the one shown here using just CSS. I believe it can be done, but I struggle with CSS3. The goal is for the background to be compatible with all modern browsers, not overly concerned about support for br ...

css

The image is failing to display in the CSS

As a beginner in the world of CSS and HTML, I encountered an issue where my background image is not showing up. Here's the code snippet that I have: ... <style type="text/css"> #header_contain{ width:935px; height: 135px; ...

htmlcss

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

Is there a way to directly convert an HTML page generated using PHP and CSS into a PDF format without the use of libraries? I have come across multiple libraries that can accomplish this task, but I would prefer not to rely on any external libraries and i ...

phphtmlcsspdfheader

Ways to expand a navbar background without compromising the central alignment of its elements

I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...

htmlcss

Managing the initial record in mysql

As I work on a slideshow, my goal is to dynamically change the HTML class attribute from "item" to "item active" when the first record is fetched from the database. For all subsequent records, the class should revert back to just "item." $RelatedTo=1; $ ...

phphtmlmysqlsqldatabase

The feature of option display is not supported on Safari browser

I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown. While this feature works perfectly in Chrome, it seems to be malfunctioning i ...

javascriptjqueryhtmlcsssafari

Is there a way for me to retrieve the name of a newly opened browser tab from the original tab?

I have written a code snippet to create a new tab within the same browser by clicking on a link. function newTab() { var form1 = document.createElement("form"); form1.id = "newTab1" form1.method = "GET"; form1.action = "domainname"; //My ...

javascriptjqueryhtml

Searching for a div table using XPATH in Python

Struggling to extract data from a table using Selenium in Python. Any suggestions on how to achieve this? https://i.stack.imgur.com/rPlKR.png <div class="js--property-table-body project-property-table__body"> <span aria-hidden=&quo ...

pythonhtmlseleniumxpath

Extracting information from an HTML table with Jsoup

Currently, I am attempting to utilize jsoup in order to parse an HTML table. As a newcomer to jsoup, I have taken the time to review some tutorials on how it operates. My objective is to retrieve values from each column within this specific website's ...

javahtmlparsingweb-scrapingjsoup

Using a dynamic HTML interface, select from a vast array of over 50,000 values by leveraging the power

I am working on a project that includes a multiselect option with over 50,000 records. We are using AJAX to fetch data from the server based on user searches, which works fine. However, when a user tries to select all records by clicking the "check all" ...

javascriptjqueryhtmlajax

Attempting to toggle the visibility of div elements based on radio button selections

I'm currently working on a script that will dynamically show and hide different div elements based on the radio button selection made by users. The jQuery library is loading correctly, as I have tested it with an alert message upon page load. Si ...

htmljquery

Trouble filling a List<WebElement> from a Table using Selenium Java

I am experiencing difficulty filling a List from a table: <div class="es"> <button class="btn btn-primary" [routerLink]="['add']">New User</button> </div> <div class="User_table" id="t02" > <div class="table ...

javahtmlselenium