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

spitfire Seguir

Épsilon
Verificación en dos pasos activada
Desde
20 Feb 2013
Mensajes
943
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
 

koppen

Curioso
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
6 Jul 2020
Mensajes
1

Puko

Delta
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Dic 2022
Mensajes
691
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:

lalilalilali

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
6 Feb 2020
Mensajes
162
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/
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
970

m16u31

Zeta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Sep 2018
Mensajes
1.691

ultracobra

Ni
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
12 Abr 2017
Mensajes
3.874
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.png
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba