The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Using REM or EM on CSS?
Terminator
post Sep 7 2016, 10:30 AM
Post #1


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



I always used em instead of pixels, but it seems that rem is a better option to use instead of em on CSS stylesheets.

Is it more of a best practice to use rem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 7 2016, 01:14 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I can't see that it matters that much what you use. I see all relative size unites as different methods to accomplish bascically the same thing. One may suit the way your create layouts or your way of thinking better than the other.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Terminator
post Sep 7 2016, 01:29 PM
Post #3


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



Thanks for the info. I am just trying to keep up with everyone which is why I asked. I learned Bootstrap because many employers want you to know it, and Bootstrap 4 was just released and they switched to REM, which is why I was wondering if that was the direction everyone was going in.

I have had several Programming Instructors who teach the same exact class, the same exact way with the same outdated textbooks for years and years, and most of them knew nothing about current and modern programming. I just dont want to be left behind like them.

I am used to using EM on CSS, but I am sure I can switch to REM easily.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 7 2016, 01:58 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



The em unit is practical for scaling things. Note how the em width scales with the px font-size, so you only need to change the latter and the former will adjust automatically to fit the text:

CODE
#a, #b {width: 6em;}

#a {
font-size: 20px;
background: pink;
}

#b {
font-size: 30px;
background: lime;
}

<div id="a">lorem ipsum</div>
<div id="b">lorem ipsum</div>

If you instead used rem for the width, it would not scale with the font-size value, so you'd have to change both.

In contrast, em is not practical for nested element font-sizes, here the rem unit would be more convenient:

CODE
li {font-size: 1.5em;}

<ul>
<li>outer
    <ul>
    <li>inner</li>
    </ul>
</li>
</ul>

Here are a couple of long pages on the subject (I haven't read them properly myself yet):
http://zellwk.com/blog/rem-vs-em/
http://webdesign.tutsplus.com/tutorials/co...-rem--cms-23984

Note that IE10 seems to be buggy, both with the "font" shorthand: http://caniuse.com/#search=rem and the "font-size" property: https://connect.microsoft.com/IE/feedback/d...unit-of-measure
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Terminator
post Sep 8 2016, 11:33 AM
Post #5


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



oh ok, so it looks like I could use a combination of both, using rem for nesting.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 8 2016, 01:13 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



That's right. Also check out the vh and vw units while you're at it: https://www.w3.org/TR/css3-values/#viewport-relative-lengths
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:00 PM