How to properly set html tag font size to use rem units?

Question

css

Hello. I'm writing an Android mobile app in Cordova. I check in the browser, and then I create the application. I use rem units for sizing. For them, you need to specify the font size of the html tag. At first I set it as 1% - it is displayed normally in the browser, in Android the sizes of elements are increased somewhere by a factor of two. Then I set the font size with the script:

var dw = document.documentElement.clientWidth;
var nfs = dw/100;
document.getElementsByTagName('html')[0].setAttribute('style', 'font-size: '+nfs+'px')

, the result is the same. Moreover, with a phone screen resolution of 1280x720, the dw variable is equal to 360. I don’t understand why at all. Can you please tell me how to correctly set the font size in the html tag for this case? If this is not possible, what is the correct way to set the rubber sizes, including the font sizes?

Answer 1

You need to improve your knowledge of quantities. Turn to Google and you will close many questions for yourself.
REM is a value relative to the font-size specified in html, in this case 1rem is 100% (not 1%) of the default font-size for html, it has nothing to do with adaptive layout, adaptability of fonts. In general, all dependencies of font sizes lead either from the parent element with the specified font-size, or from the font-size specified for the entire document, there can be no dependence on the screen size (except for your example with JS)
In adaptive layout, @mediaqueries are used.
But your task is not clear at all, in some cases you can set the viewport width and then the page will be scaled to fit the screen, while all elements will always be in their places.