¿Cuáles son los valores de punto de interrupción CSS adecuados para el diseño adaptable?

 

 

 

Cuales son los valores de punto de interrupcion css adecuados para el diseno adaptable 1

Los valores de punto de interrupción CSS óptimos que uso en mis proyectos

Mientras diseñaba un sitio, noté que estaba usando algunos valores bastante aleatorios para los puntos de interrupción de CSS. A veces, un valor redondeado como 800 o 1200, a veces un valor específico hasta el píxel como 672.

Busqué los valores adecuados para aplicar a mis puntos de interrupción en el futuro.

Tuve un poco de tiempo para investigar esto y llegué a esta conclusión.

 

Tenemos 5 tamaños de dispositivos principales de los que preocuparnos:

  • retrato móvil
  • paisaje móvil
  • retrato de tableta
  • tableta paisaje
  • computadora portátil

Estos dispositivos se asignan a esos valores de píxeles:

  • retrato móvil: menos de 640 px
  • Paisaje móvil: 640px
  • retrato de tableta: 768px
  • tableta horizontal: 1024px
  • computadora portátil: 1280px

Tomé esos valores de los valores predeterminados de Tailwind .

No soy diseñador, por lo que no participo diariamente en las mejores prácticas, pero esta vez decidí diseñar dispositivos móviles primero. Cambiar bañera por plato de ducha | Mamparas - Bricoducha

Lo que significa que mi CSS, sin ninguna consulta de medios, se diseñará para el caso de uso de retrato móvil y luego agregaré puntos de interrupción que diseñaré para dispositivos cada vez más grandes, prohibiéndoles las max-widthconsultas de medios.

Creo que siempre he ido por el camino opuesto: diseñar para pantallas más grandes, que es lo que más uso, y luego ir más pequeñas, pero diseñar primero para dispositivos móviles y utilizarlos min-widthparece ser la solución más aceptada y utilizada hoy en día.

Estas son las media queries que utilizaré a partir de ahora:

@media (min-width: 640px) {}@media (min-width: 768px) {}@media (min-width: 1024px) {}@media (min-width: 1280px) {}

Tips de CSS




Tal vez te puede interesar:

  1. Filtros CSS
  2. Manejo de errores CSS
  3. Importar un archivo CSS usando @import
  4. Normalización de CSS

¿Cuáles son los valores de punto de interrupción CSS adecuados para el diseño adaptable?

Mientras diseñaba un sitio, noté que estaba usando algunos valores bastante aleatorios para los puntos de interrupción de CSS. A veces, un valor redondeado

programar

es

https://aprendeprogramando.es/static/images/programar-cuales-son-los-valores-de-punto-de-interrupcion-css-adecuados-para-el-diseno-adaptableja-2211-0.jpg

2024-11-03

 

Cuales son los valores de punto de interrupcion css adecuados para el diseno adaptable 1
Cuales son los valores de punto de interrupcion css adecuados para el diseno adaptable 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences