[SOLVED] Rem used for responsive design looks different on mobile device


This Content is from Stack Overflow. Question asked by jakmas

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.


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.


This Question was asked in StackOverflow by jakmas and Answered by Brad It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?