Cómo hacer que el CSS se adapte automáticamente a diferentes pantallas?

  • Autor Autor spitfire
  • Fecha de inicio Fecha de inicio

spitfire

Épsilon
Verificación en dos pasos activada
Estoy haciendo una web con el CSS diseñado para verse bien en una pantalla normal de PC y notebook, pero claro, al verla en el movil se ven la letras chicas y hay que aumentar para leer, como hago para que estas medidas cambien automaticamente al ver la web desde el movil? gracias
 
Un ejemplo...

Usando <body> al detectar que se reduce a 500px cambia la letra/font a 20px

@Media only screen and (max-width: 500px) {
body {
font-size: 20px;
}
}

*cambia ...
body por el selector/id/class el cual contiene la letra
500px por el ancho, que al llegar a esa medida cambia la letra
el tamaño 20px de font-size por la que quieres cuando se reduce
 
Última edición:
Con media querys, con ellas puedes crear la web para distintos tamaños de pantalla. O también puedes usar una propiedad llamada clamp, se usa mayormente para textos https://web.dev/i18n/es/min-max-clamp/
 
muchas gracias a todos por sus respuestas, las pondre en practica
 
oh muchas gracias tambien lo voy a probar
 
Así va un media query básico:
@Media screen and (max-width: 768px) {
x-y: z;
}

Hasta 768px los mediaquery se aplican, si el mayor a 769px la pantalla pues, es como se ve normalmente en desktop...

Existen compiladores de CSS muy avanzados pero yo te recomiendo empezar con "CSS vanilla" o CSS sin compiladores / librerías.
Cuando entiendas de que van las clases, atributos, etc, empieza a pensar en sistemas como Bootstrap o tailwind, entre otros.

Si algo me preguntas que tengo unas técnicas de CSS simples y fáciles de aplicar, como la anidación de clases bajo un elemento padre. Ahora mi html se ve así, creo que se ve muy limpio: El CSS es consecunte con esa organización:

 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro