I am using Chrome and default font size is 16px as default.
I have an idea to adjust font-size according to screen width via media queries.
I saw some CSS experts adjusting default 16px font size to 1.6rem based system.
So idea behind scence is to equalize 1rem to 10px and use everything as rem then if needed to adjust something change only font-size so all measurements will change at same ratio.
See this example
* {
font-size: inherit;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}<p>Hello</p>
<input type="text" value="Hello">Can anybody explain why font-size in input is greater than p ?
Also if I try to obtain font-size in dev tools I can't get any value.
If I try to get it via JavaScript like this
document.getElementsByTagName("input")[0].style.fontSize
I get ''
You get a null result on looking at the style because the inline style has not been set.
The two Hellos are not different font sizes - both are 16px, but the paragraph is Times New Roman and the input it Arial - set by the default within the browser, at least on my inspection in Chrome/Edge on Windows10.
It is worth using your browser's inspect facility to see exactly what is setting each of the styles, and it will show you the computed style as well.
Input does not inherit by default but you can set it to inherit with css:
input{font-family:inherit;}
* {
font-size: inherit;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
input{font-family:inherit;}<p>Hello</p>
<input type="text" value="Hello">