Recientemente, estaba practicando diseño web más allá de las cosas de código. Pero después de que abrí Sketch y comencé a hacer un rectángulo de mi sitio, me quedé atascado.
¿Qué widthdebo usar?
Buscaría las estadísticas de resolución en este sitio . Y para mi propio gusto, elegí 1440px de ancho. (Debido a la característica de 1440, es más fácil dividir 2, 3 o 6.) Sin embargo, ahora tengo que elegir el ancho para móvil (y también, si es posible, para tableta ). Aunque hay un artículo sobre consulta de medios en CSS Tricks , no tengo idea de cuántos px debo usar.
¿Hay alguna manera de averiguar esto?
La respuesta corta es: no hay ninguno.
Si desea que su sitio web esté preparado para su uso en el mundo amplio y salvaje, debe tener en cuenta cualquier ancho de pantalla entre, digamos, 480 y 4800 px. Los diseñadores modernos para diseños web receptivos (diseños que se adaptan al ancho de la ventana gráfica) trabajan con rangos de anchos . Cada rango tiene sus propias peculiaridades para adaptar el sitio web al ancho.
En mi caso, suelen depender del diseño en particular. Comienzo con la pantalla más pequeña, la diseño y estiro la ventana gráfica hasta que el diseño se vuelve feo o difícil de manejar. Luego establezco un límite y empiezo a diseñar para el siguiente rango de ancho.
Tenga en cuenta que el tamaño de la pantalla en píxeles no necesariamente da una indicación del tipo de dispositivo utilizado: actualmente hay teléfonos pequeños en el mercado que usan pantallas Retina, duplicando efectivamente el ancho de sus píxeles sin cambiar las dimensiones físicas (mucho). Por lo tanto, podría tener un teléfono de 960 px en lugar de un monitor de 800 px. (Es cierto que estos últimos son raros en estos días).
Creo que es mejor ir con dos mesas de trabajo, con un tamaño de 320 px a 1600 px de ancho para cada una.
La diferencia entre los dos es que con el móvil, el ancho de su área de contenido es el tamaño de pantalla móvil estándar de 320 px, mientras que en la mesa de trabajo de 1600 px, está entre 980 px (mi preferencia, ya que es más elegante en términos de compatibilidad cruzada entre tamaños de pantalla) y 1200 px (para que obtenga un poco del fondo para que quepa en la ventana gráfica de la computadora portátil, que va desde 1280 px en adelante).
Siempre puede agregar una mesa de trabajo para tableta, pero mi experiencia me dice que las dos para dispositivos móviles y de escritorio son suficientes, lo que permite a los desarrolladores front-end una agradable sensación de libertad cuando se trata de un diseño fluido, que puede ser un poco impredecible una vez. comienzas a cargar los activos en él (para que las cosas no se corten o tengas que ceñirte a un tamaño que puede no funcionar bien entre los puntos de interrupción (por lo general, 320 px, 480 px, 768 px, 980 px y 1280 px).
Hay dos frameworks principales Bootstrap (por Twitter) y Foundation (por Zurb) son los frameworks web más utilizados. Recomiendo empezar por ahí para ver las tallas. Aquí está el código y los tamaños que usan.
Oreja
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Base
// Small screens
@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Yo personalmente uso Sketch 3 y empiezo con 850px de escritorio y 320px móvil. Aquí hay una plantilla 3 también para Sketch google bootstrap-3-responsive-grid-template.sketch (no puedo pegar más de 2 enlaces)
Uso las pautas generales de Bootstrap. He encontrado que los dispositivos virtuales no son confiables. Uso tres o cuatro dispositivos reales (uno un iPad), además de mi monitor de escritorio. Las tabletas de gama baja y los teléfonos de gama baja en WiFi sin SIMS de varios tamaños de pantalla son lo suficientemente económicos como para ver cómo se ve mi trabajo. Cuanto más grande es la pantalla, menos se necesita prestar atención a la precisión de la posición (¡por lo general!), así que no siento que necesite una tableta de tamaño completo.
Una cosa que realmente puede ayudar es usar una extensión para su navegador de escritorio que le mostrará páginas en varios tamaños y orientaciones que representan una variedad de dispositivos.
Los que he usado y puedo recomendar:
la extensión de Chrome "Probador de diseño web receptivo" que le proporciona una lista de dispositivos comunes de Apple y Android y crea una ventana del navegador en ese tamaño de píxel
el modo de diseño receptivo incorporado en el navegador Safari para Mac, que le muestra representaciones aproximadas en paralelo en todos los dispositivos móviles de Apple más el escritorio.
chenghuayang
Vicente
Vicente
bjb568
DA01
chenghuayang