Using REM or EM on CSS? |
Using REM or EM on CSS? |
Terminator |
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? |
pandy |
Sep 7 2016, 01:14 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
|
Terminator |
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. |
Christian J |
Sep 7 2016, 01:58 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 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 |
Terminator |
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.
|
Christian J |
Sep 8 2016, 01:13 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 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
|
Lo-Fi Version | Time is now: 23rd April 2024 - 04:45 PM |