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

  • Autor Autor spitfire
  • Fecha de inicio Fecha de inicio
spitfire

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:

1683826363761.webp
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba