Un usuario preguntó 👇
Hola,
Estaba trabajando en mi nuevo diseño web en mi computadora portátil con 1600 × 900. Después de hacer todos los ajustes de CSS receptivo, etc., descubrí que no es suficiente … mi diseño se ve bien en la mayoría de los usuarios que usan la resolución de pantalla 1366 × 768 , todo es «demasiado grande» … imágenes, espaciado / espacio negativo, tipografía, etc.
Entonces, ¿cometí un error en un punto de partida? ¿Debería usar 1366 × 768 como resolución de pantalla y definir el ancho máximo, dados los tamaños de imagen? ¿O diseñar en tamaño de ancho máximo? Estoy confundido 🙂
¿Qué resolución de pantalla / ancho frontal o flujo de trabajo tiene para el diseño de tema receptivo? Gracias
(@gappiah)
Hace 3 años, 5 meses
Ahora, creo que puede tener una razón legítima para comenzar desde cero en lugar de usar una biblioteca de interfaz que ya tenga todos estos problemas resueltos.
Pero al menos, ¿por qué no tomar sus puntos de lanzamiento, ya que parecen funcionar muy bien (a juzgar por su popularidad)?
Los principales puntos de lanzamiento de Bootstrap 4 son:
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }Usan puntos de lanzamiento adicionales en casos específicos. Vea los documentos de diseño aquí:
http://getbootstrap.com/docs/4.0/layout/overview/
(@anevins)
Donante de WCLDN 2018 Apoyo voluntario
Hace 3 años, 5 meses
Comience a escribir su CSS para el ancho móvil, luego suba. De lo contrario, le resultará difícil hacer un diseño compacto de un ancho menor.
Por ejemplo:
/* (mobile) */
.foo {
color: red;
}
/* (tablet landscape) */
@media screen and (min-width: 768px) {
}
/* (desktop) */
@media screen and (min-width: 1024px) {
}
Esta respuesta fue modificada hace 3 años, 5 meses por. Esta respuesta fue modificada hace 3 años, 5 meses por.
(@gorem)
Hace 3 años, 5 meses
@gappiah Gracias, estoy usando bootstrap.-)
@anevins Gracias, CSS en el móvil Soy el primero.
Lo siento. No estaba claro … Mi problema no parece estar en CSS y pantallas pequeñas, sino en mi flujo de trabajo entre la página web en vivo de Photoshop X y las pantallas grandes. Porque el diseño no es “compacto” al cambiar los tamaños de pantalla.
Aquí hay una estadística de tamaño de pantalla grande de nuestro sitio web (la más usada a la menos usada): 1366 × 768 1920 × 1080 1440 × 900 1536 × 864 1600 × 900 1280 × 1024 1280 × 720
Pensé que era una buena idea decidir / decidir qué resolución de pantalla diseñar (en Photoshop), así que arreglé 1300px, pero el resultado no es bueno ahora en la pantalla de 1366 × 768 (la mayoría se usa).
Entonces: – ¿Cuál es la solución principal que está diseñando para páginas web (en Photoshop)? ¿Existe un estándar de «ancho inicial de pantalla»? – ¿Está estableciendo un ancho máximo de contenedor / envoltura basado en el diseño de Photoshop? – Si no … ¿cómo lidiar con resoluciones superiores a la resolución elegida (como 1920 × 1080, 1440 × 900, 1536 × 864, 1600 × 900)? – Si la resolución máxima de pantalla utilizada es 1366 × 768, ¿ayuda cambiar mi monitor (cuando estoy en Photoshop) a esa resolución? – ¿Existe un flujo de trabajo especial (a partir de Photoshop) si se utiliza un diseño fluido?
Gracias
¿Solucionó tu problema??
0 / 0