banner
hace 3 años
1179 Views

Medidas para Responsive Design

Autor:
banner

Después de que Google empezase a penalizar las web sin Responsive Design, se ha hecho imprescindible conocer este tipo de diseño para no perder importancia en el posicionamiento web.

Para ello en este articulo recordaremos las medidas para crear un diseño Responsive Design y así tener tu proyecto web diseñado para todo tipo de dispositivos.

responsive-web-desing

Con la ayuda de estas medidas podremos crear webs y aplicaciones para cualquier tipo de dispositivo del mercado.

Media Queries – Responsive Web Design

Large desktop@media (min-width: 1200px) { … }

Portrait tablet to landscape and desktop @media (min-width: 768px) and (max-width: 979px) { … }

Landscape phone to portrait tablet@media (max-width: 767px) { }

Landscape phones and down@media (max-width: 480px) { … }

Smartphones (portrait and landscape)@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { … }

Smartphones (landscape)@media only screen and (min-width : 321px) { … }

Smartphones (portrait)@media only screen and (max-width : 320px) { … }

iPads (portrait and landscape)@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { … }

iPads (landscape)@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { … }

iPads (portrait)@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { … }

Desktops and laptops@media only screen and (min-width : 1224px) { … }

Large screens @media only screen and (min-width : 1824px) { … }

iPhone 4 and high pixel ratio devices@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { … }

Con la ayuda de esta novedosa técnica Css3, como son las Media Queries, podemos desarrollar proyectos y aplicaciones web con la posibilidad de poder ejecutarlos en cualquier tipo de dispositivo del mercado.

Mediante la herramienta de Google podemos Validar el Responsive Web Design de nuestro proyecto web

Nada mas por hoy, espero que os sirva para vuestros futuros proyectos.

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Recursos Web
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Web Sdc Studio