¿Que es Responsive Design?

El Responsive Design es un enfoque de programación que hace uso de propiedades html5 y css3 que permiten desarrollar páginas web adaptables a los diferentes dispositivos del mercado como, DeskTop, Tablet y celulares, El objetivo del Responsive Design es detectar el tamaño y resolución de la pantalla en la cual se quiere visualizar una página web.

Específicamente el Responsive Design usa coordenadas X y Y, medidas de ancho y alto en porcentajes en vez de tamaños fijos en pixeles, lo que permite que la estructura html se re-dimensione al tamaño de la pantalla. Por otro lado tenemos los llamados Media Queries una característica de CSS3, para trabajar con media queries es necesario tener en cuenta las diferentes resoluciónes de pantalla para cada dispositivo, a continuación te muestro de las  resoluciones en las que me baso para mis <strong><a href=”http://desarrolladorweb.com.co/servicios/desarrollo-paginas-web/”>desarrollos de páginas web responsive</a></strong>

Medidas estándar para Celulares

  • Phone 4 y 4S: 320 x 480
  • iPhone 5 y 5S: 320 x 568
  • iPhone 6: 375 x 667
  • iPhone 6+: 414 x 736
  • Nexus 4: 384 x 598
  • Nexus 5: 360 x 598
  • Galaxy S3, S4, S5: 360 x 640
  • HTC One: 360 x 640

Medidas estándar para tablets

  • iPad y iPad Mini: 1024 x 768
  • Galaxy Tab 2 y 3 (7.0 pulgadas): 600 x 1024
  • Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280
  • Nexus 7: 603 x 966
  • Nexus 10: 800 x 1280
  • Microsoft Surface W8 RT: 768 x 1366
  • Microsoft Surface W8 Pro: 720 x 1280

Combinando las anteriores características del Responsive Design podemos tener una página web totalmente adaptable, a los diferentes dispositivos del mercado sin necesidad de tener dos desarrollos diferentes, complementando este articulo puede ver los principios básicos del responsive design, donde encontraras mas información de como funciona el Responsive Design.

 

Comparte el conocimiento

Deja un comentario

avatar
wpDiscuz