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-width
consultas 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-width
parece 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:
¿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
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