Estoy usando Chrome y el tamaño de fuente predeterminado es 16px por defecto.
Tengo una idea para ajustar font-size según el width de la pantalla a través de consultas de medios.
Vi a algunos expertos en CSS ajustando el tamaño de fuente predeterminado de 16px a un sistema basado en 1.6rem .
Entonces, la idea detrás de escena es igualar 1rem a 10px y usar todo como rem , luego, si es necesario, para ajustar algo, cambie solo font-size para que todas las medidas cambien en la misma proporción.
Ver este ejemplo
* { font-size: inherit; } html { font-size: 62.5%; } body { font-size: 1.6rem; } <p>Hello</p> <input type="text" value="Hello"> ¿Alguien puede explicar por qué font-size en input es mayor que p ?
Además, si trato de obtener font-size en las herramientas de desarrollo, no puedo obtener ningún valor.
Si trato de obtenerlo a través de JavaScript como este
document.getElementsByTagName("input")[0].style.fontSize
consigo ''
Obtiene un resultado nulo al mirar el estilo porque no se ha establecido el estilo en línea.
Los dos Hola no tienen tamaños de fuente diferentes, ambos son de 16 px, pero el párrafo es Times New Roman y la entrada es Arial, configurado de forma predeterminada en el navegador, al menos en mi inspección en Chrome/Edge en Windows10.
Vale la pena usar la función de inspección de su navegador para ver exactamente qué está configurando cada uno de los estilos, y también le mostrará el estilo calculado.
La entrada no hereda de forma predeterminada, pero puede configurarla para que herede con 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">