给定设计（1920px x 1080px）的 html 字体大小基础是多少？

Question

I'm a little confused. If I have a mockup design given (1920x1080px) and for example the paragraph has a font-size of 22px and h1 has a value of 60px, what should be the base of font-size to convert to rem?

html {
   font-size: 18px;
}

html {
       font-size: 100%;
    }

or should I take

   html {
     font-size: 62.5%
   }

Answer 1

If, as @HaoWu suggests, you set

html { font-size: 62.5%; }

then you are basically setting rem as 10px in most cases because most browsers will default to 16px as the base font size. It's then an easy calculation to set h1 to 60px as it's just 6rem.

There will be occasional exceptions if the user has set the browser base size to something else. That is their choice, perhaps because they hope for websites to automatically show bigger text. This means you cannot absolutely depend on 1rem being 10px. In most cases this should be fine as everything will be correctly proportional.

If it is vital to your layout, and usually in a properly responsive design it won't be, that the rem has a definite px value then you need to define html font-size in px, but best not if you can avoid it.