Cambiar el tamaño de la fuente dependiendo de la resolución
Estoy desarrollando una página web que usa diferentes tamaños para sus diferentes párrafos, h ... y así sucesivamente. Estoy usandoem tamaños:tamaño de letra: 2em;, como ejemplo. Pero cuando cambio la resolución de mi pantalla a una más baja, quiero que el tamaño sea más pequeño.
Para ello, probé este código:
<script>
if ( screen.width > 1600)
{
document.write('<style>#centered h1 { font-size: 2em; } </style>');
}
else if (screen.width <= 1600 && screen.width >= 1360)
{
document.write('<style>#centered h1 { font-size: 1.7em; } </style>');
}
else if (screen.width < 1360 && >= 1024)
{
document.write('<style>#centered h1 { font-size: 1.4em; } </style>');
}
else
{
document.write('<style>#centered h1 { font-size: 0.8em; } </style>');
}
</script>
Primero: no funciona ...
Segundo: creo que debería haber una forma más limpia de hacerlo ...
Entonces, la pregunta es: ¿cómo usar diferentes tamaños para mis fuentes o cómo hacer que se ajusten para diferentes resoluciones?
¿Alguien puede ayudar por favor? ¡Gracias!