How often to use REM in CSS [closed]


Tags: css

Problem :

I'm not sure if this is really the right place for this question, so if someone knows of a more appropriate StackExchange site, please share and I will be happy to move the question.

I'm currently trying to make it a habit to use relative measurements for CSS instead of px to accommodate the ever-increasing number of users who have ultra-high resolution monitors i.e. 4K.

In doing so, I got to thinking - should rem be used for everything that would have used px?

I'm currently finding that I'm using rem for border-radius, margin, padding, and font-size. After searching the interwebs for a bit, I couldn't really come up with any sort of guide for what is appropriate to use rem on, so I figured I would ask here - Are there any cases where you wouldn't want to use rem or em as the measurement for a property, but instead use px? Or is it pretty much just commonplace to use rem for everything?



Solution :

rem is relative to the font size defined in the root node while em is relative to the font size of the current node.

I generally use rem for everything except if the value depends on the font size of the current element. E.g. Given two versions of a H2 title: h2 with 40px and h2.large with 45px, then the bottom margin is relative to the size of the h2 element if you used em here.

I would use Pixels for small values such as border-width. The rendering is usually better.


    CSS Howto..

    How to specify styles for h:panelgrid in jsf

    how to make website more user friendly for mobile users [closed]

    How can i make 3 independently scrollable columns

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How do I vertically align elements within a div in CSS?

    How do I make a textarea resize properly when I resize browser window?

    How to make infinite movement of a div?

    How do I make LessCSS output css which is then uploaded to webserver

    How to remove a class as each image is loaded

    How to hide one table and show another in nice animated way?

    How to make a border colorful using CSS?

    how to make a floating div disappear for smaller screens?

    How to think to get all content inline (HTML & CSS)

    How to solve CSS background transparency?

    How to create a set of css rules for safari

    Vim: How would I recursively run “:sort” for everything between curly braces?

    CSS accordion menu - How to expand and hyperlink

    How to write a CSS hack for IE 11? [duplicate]

    How to add a:hover css function to this code?

    Show div when hover another div using only css

    How to add spacing between checkboxlist items?

    How to make different font families appear same size? (computationally)

    How do I do the css for this?

    How to change css style of Kendo Combobox

    How to apply css to only one level of list items (not to child elements)

    CSS help, how to target this link inside of div

    How to create a three-column website background using CSS?

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    How to reset css in middle of html document?

    How to make styling and functioning of form elements get not to break in all browsers?