Rem used for responsive design looks different on mobile device

jakmas 0
Viewed 21

I followed advice for a responsive design where I heard that setting up this:

html {
  font-size: 62.5%
}

on the root of your css will make it very easy to work with units (because 1rem = 10px). And everything worked fine, I checked final work on different screen sizes, adjusted media queries breakpoints and deployed the website. On my computer and all looks good, tablet - also good... but on my iPhone everything looks wrong. I started to look up what can be the cause and one article said that font-size: 62.5% on mobile device doesn't work. Do you have any experience with that? Please share if you have some articles or knowledge about it.

responsiveness responsive-design responsive sass css
1 Answers

1 rem in your case would equal a font size of 10px based on what is below. Personally there is no reason to set a font size, and allow the browser to set the size

62.5% usually refers to the browser default size of 16px. 16 multiplied by .625 = 10. 1 rem would equal 10px, again based on the browser default font size. When you set 62.5%, you are setting it as 62.5% of the default size. Most browsers default font size = 16px

In CSS rem stands for “root em”, a unit of measurement that represents the font size of the root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your UI.

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

userSS610
Related