en el mundo actual, hay una gran cantidad de dispositivos para que las personas elijan y puede ser desalentador tratar de acomodar y construir para las mejores experiencias en todos los dispositivos. Sin embargo, es importante mantenerse al día con los tamaños de pantalla y resoluciones más populares al diseñar sitios web y móviles. Un sitio optimizado y receptivo facilita el flujo de usuarios y, en última instancia, una experiencia agradable para su audiencia.,
Tamaño de Pantalla, Resolución y Vista: ¿qué significa todo esto?
Cuando compre un dispositivo, a menudo verá tanto el tamaño de pantalla como la resolución enumerados en las especificaciones. El screensize es la medida física diagonalmente de la pantalla en pulgadas. Esto no debe confundirse con la resolución, que es el número de píxeles en la pantalla que a menudo se muestra como ancho por alto (es decir, 1024×768). Debido a que los dispositivos con el mismo tamaño de pantalla pueden tener resoluciones muy diferentes, los desarrolladores usan viewports cuando crean páginas compatibles con dispositivos móviles., Las Viewports son versiones reducidas de resoluciones que permiten ver los sitios de forma más uniforme en diferentes dispositivos. Las vistas suelen ser más estandarizadas y más pequeñas que los tamaños de resolución.
mientras que las pantallas de escritorio y portátiles están en orientación horizontal (más anchas que altas), muchos dispositivos móviles se pueden girar para Mostrar sitios web en orientación horizontal y vertical (más altas que anchas). Esto significa que los diseñadores y desarrolladores deben diseñar para estas diferencias.
Necesita ayuda para determinar si su sitio web es responsive? Utilice nuestra herramienta gratuita de MG, Responsive Design Checker.,
mientras que las pantallas de escritorio y portátiles están en orientación horizontal (más anchas que altas), muchos dispositivos móviles se pueden girar para Mostrar sitios web en orientación horizontal y vertical (más altas que anchas). Esto significa que los diseñadores y desarrolladores deben diseñar para estas diferencias.
estilo responsivo
sería casi imposible para las empresas diseñar para todos y cada uno de los dispositivos individuales. En cambio, al programar diseños responsivos, los desarrolladores a menudo:
- agrupan el estilo en los tamaños de dispositivo más típicos para teléfonos, tabletas y computadoras de escritorio., En este caso, cualquier cosa más grande que 7 pulgadas se muestra generalmente en la resolución del escritorio o –
- Use puntos de interrupción (anchos de píxeles definidos que la pantalla ajustará en función del tamaño de la pantalla) dependiendo del diseño y la disposición
a veces, un desarrollador puede optar por combinar ambos métodos si lo consideran necesario. Recomendamos comenzar agrupando los tamaños de dispositivo típicos.
si usted es un desarrollador y está buscando generar los estilos necesarios para manejar el estilo móvil o responsivo, a continuación hemos incluido un fragmento de CSS que podría ayudar.,d solo se utilizará como guía para comenzar:
/* start of desktop styles */
@media screen and (max-width: 991px) {
/* inicio de estilos de tabletas grandes */
}
@media screen and (max-width: 767px) {
/* inicio de estilos de tabletas Medianas */
}
@Media screen and (max-width: 479px) {
/* start of phone styles */
}
most popular screen resolutions
sabiendo que es clave adaptarse a los muchos dispositivos diferentes al diseñar sitios Web, Hemos compilado una lista de los dispositivos más actualizados con sus respectivos tamaños de píxel y viewports a continuación., También hemos puesto esta información en un práctico PDF descargable.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Compartir con nosotros en Facebook!