0

For convenience, I have always defined 750px design draft as 750rem.

That is, 1rem=1px.

But today I see a new view that rem should be able to convert with em,

So 1 rem equals 16 px. I think it makes sense.

Who can share the advantages or disadvantages of these two solutions?

============================================================

My question is, should the rem setting follow the setting of 1rem=16px in the 375 design draft

That is to say, the conventional 750 design draft 1Rem=32px

It should be 750 design drafts. 1Rem=75px.

This is good for calculation.

Riddle
  • 51
  • 1
  • 8
  • 1
    Does this answer your question? [Should I use px or rem value units in my CSS?](https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css) – zerdox Dec 26 '22 at 07:46
  • @zerdox Thank you for your answer. In fact, I have read the relevant questions, including this one. But the question I encountered was different from the questioner. I clearly know that I should use rem. – Riddle Dec 26 '22 at 08:50
  • Probably you should better know first why they are different and in which case you should use px and in which rem values. `rem` and `em` units mostly used to style text (font size, line height, etc). Sorry, but your question has no difference with that one I linked. – zerdox Dec 26 '22 at 08:55
  • @zerdox The use of rem I mentioned refers to the use of js to set rem according to the width. For example, the 375 screen width is 1rem=37.5px. For 750 screen width, 1rem=75px. That means it will be more like `vw` Instead of fixing rem to 16px or 10px in the problem, it is more like writing `px` directly. This is not the same situation. – Riddle Dec 26 '22 at 09:32
  • @zerdox I need to completely restore the width ratio of the design draft, so my choice is vw or rem, and I choose rem. Px is completely unable to meet my needs, because when the width is insufficient, the design proportion cannot be perfectly retained. – Riddle Dec 26 '22 at 09:34
  • I misinterpreted your question and removed my prior comments. The main argument for **not** changing `1rem` to `1px` is that all *User Agent* font size definitions depend on that single truth that `1rem = 16px` which gets inherited by many document tags. Sure, going from *imperial* (100%) to *metric* (62.5%) is done quite often, but going from 16px to 1px scales all default font-sizes down to `1/16th` of their original, intended size. I'm sure many web devs won't appreciate the gist. You seem to want the world to change, so you can have and easy fix. Redo the design, we all did at least once. – Rene van der Lende Dec 28 '22 at 00:40
  • Another thing you might have overlooked: users can change their preferred default font size in the browser settings. In doing so, they change the default value of `1rem` to whatever they need it to be because of personal preferences or vision impairment. Especially the last group of user will not appreciate scaling everything down to `1/16th` of the original size. It is true what people say: lose 'em once and they will never come back. Not with millions of alternative sites. – Rene van der Lende Dec 28 '22 at 00:56
  • @RenevanderLende You are right. I changed rem to 16px to fit its own meaning. And use postcss to realize the conversion from px to rem. – Riddle Jan 03 '23 at 11:58

2 Answers2

0

I know there is a practice to override rem as 10px which is really handy in calculations. However, how good is this practice is a question, because usually all designs use a multiplicity of 4: 4, 8, 12, 16.

Knyazik01
  • 61
  • 4
  • It seems that this flexible layout method is not discussed on stackoverflow. Use js to change the font size value of the body to ensure that the elements in the page are proportionally enlarged on devices of different sizes. And the content can change flexibly with the scaling of the container (listen to resize) For the convenience of calculation, the font size may be set to 75px, a size of 750/100 * 10. In this way, 1 rem is equal to one tenth of the page width. (750px is twice the size of the iphone se, which is a common model with a small aspect ratio) – Riddle Jan 03 '23 at 12:05
0

Always use rem for responsiveness, accessibility, and ease of use.
There's no point in using px (unless when really needed). Specially not in this responsive era.

Given the argument of ease of use, and knowing the default browser agent font-size is 16px — meaning 2rem will equal 32px, when going larger numbers in such increments can have a slight degree of cognitive load, so instead one could use a base 10 system:

html {
  font-size: 62.5%;  /* now 1rem === 10px */
}

#someElement {
  padding: 1rem;   /* 10px padding */
  font-size: 2rem; /* 20px font size */
}

or, if you like the default 16 you can always use i.e: calc(1rem * 3); /* 48px */

Another trick if you need total font scalability is to use the base font-size set to a desired clamp or in units relative to the viewport (like vh, vmin etc ...). But that's another story.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313