Please refer to http://techably.com/chrome-font-size-bug-fix/11996/
and http://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag
The reason is that chrome does not support 10px fonts.
Therefore, even if you set a 10px font, Google Chrome silently changes it to 12px for you.
The solution is to set the font size of the HTML to 50px, which is 312.5% when converted into a percentage. This is how Meituan’s touch screen h5 page is handled.
It's much easier to calculate this way.
Of course, you can also set it to 20px, which is easy to calculate.
It is best to use css pre-compiled processor to save calculation.
The minimum font size for Google Chrome is 12px. Regarding the setting of fonts on the mobile terminal, it is not recommended to use rem units. The calculated font-size will appear as an odd number like 23. The method used by Taobao is to use media queries to set the font size based on the DPR value of the mobile phone. For specific methods, you can view related flexible articles.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Please refer to http://techably.com/chrome-font-size-bug-fix/11996/
and http://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag
My own solution is a bit convoluted, you can refer to:
http://codepen.io/feilong/pen/YPpror
Because the minimum font size of chrome and other mainstream browsers is 12px by default.
html {font-size: 62.5%;} is actually not set to 10px
The reason is that chrome does not support 10px fonts.
Therefore, even if you set a 10px font, Google Chrome silently changes it to 12px for you.
The solution is to set the font size of the HTML to 50px, which is 312.5% when converted into a percentage. This is how Meituan’s touch screen h5 page is handled.
It's much easier to calculate this way.
Of course, you can also set it to 20px, which is easy to calculate.
It is best to use css pre-compiled processor to save calculation.
It is better to set html{font-size:62.5%;font-size:16px;font-size:1rem;}
It’s best not to set it to something like 10px or 62.5%, you’d better make sure the font size set on the html is no less than 12px
The minimum font size for Google Chrome is 12px.
Regarding the setting of fonts on the mobile terminal, it is not recommended to use rem units. The calculated font-size will appear as an odd number like 23. The method used by Taobao is to use media queries to set the font size based on the DPR value of the mobile phone. For specific methods, you can view related flexible articles.