I know the basics of html/CSS but I have a question regarding when to use rem- and px measurement.
To me it would make sense to [U]always[/U] use rem to make your website compatible to all browsers? What are the drawbacks of only writing in rem? The only thing I can think of is less accuracy on your elements but I am really looking for someone to elaborate on this matter!
@TrainAug 01.2016 — #If you use a value of 1em or 1rem, it could translate in the browser as anything from 16px to 160px or any other value.[/QUOTE] That could throw things for a loop.
@jedaisoulAug 01.2016 — #Thanks Train for that link. My understanding is somewhat different. Not that I disagree with the description of the way that em and rem operate, but rather the NEED for these cumbersome units in the first place.
There is, or at least was two mechanisms built into the Windows OS to allow uses to scale text to meet their needs:
1. To scale text only so that text size of 16 pixels in the web page occupies, say, 32 physical pixels on the screen. Graphical content remains the original size.
2. To scale the web page so that it is, say, doubled in size.
Option 1 allows partially sighted users to maximize the screen area devoted to text, which seems like a good idea, but it potentially mucks-up the design of the web page. It also avoids the pixellation that can arise when graphics are expanded beyond their original size.
Option 2 preserves the layout of the web page, but potentially suffers pixellation of the graphics. However, how noticeable will the pixellation be to someone who is partially sighted anyway? And won't they, at least at times, need the graphics to be enlarged as well?
Furthermore, with responsive designs the designer no longer has the level of control over the visual layout that was possible with fixed-width designs. He/she must accept that the whole design is fluid to some extent. So the perceived benefits of rem and em units are largely historic, and less relevant in the context of responsive design. Furthermore, the disadvantage of designing in "fixed" px units is largely spurious, because the px unit is not fixed anyway!
Then there are disadvantages to specifying sizes in rem and em units:
a) They are cumbersome because it is often necessary to use decimals.
b) They are potentially misleading. E.g. 1px is, by default, equal to 0.0625em. But, as 1em may vary in size from 8 (or less) to 160 (or more) pixels, 1px may equate to 0.125em or 0.00625em. So how many places of decimals do you need to use? It is not clear.
c) They are illogical:
- em units are relative to the text size of the element itself, which is in px units!
- rem units are relative to the text size of the html element. But if you set the text size of the html element, you disable the users ability to scale the text! How naff is that???
@scriptloverAug 19.2016 — #I recommend using rem units for fonts, if only because it makes it easier for you, the developer, to change sizes. It's true that users very rarely change the default font size in their browsers, and that modern browser zoom will scale up px units. But what if your boss comes to you and says "don't enlarge the images or icons, but make all the fonts bigger". It's much easier to just change the root font size and let all the other fonts scale relative to that, then to change px sizes in dozens or hundreds of css rules.
I think it still makes sense to use px units for some images, or for certain layout elements that should always be the same size regardless of the scale of the design.
@jedaisoulAug 21.2016 — #If you are setting font sizes that often that using REM units is significantly easier to change than PX, then I suspect that you are writing poorly structured code in the first place! Plus, as I said, you should NEVER set the root font size, as that disables the users ability to re-size the text!!!
Furthermore, how likely is it that you will ever in your whole career be asked to resize ALL the text in a particular font? It simply does not make sense to me. ? And even if that mythical event DID occur, I suspect you might want to make more subtle changes, e.g. increasing smaller font sizes by a larger percentage than the larger ones?