10 Snippets de los Media Queries

10 Snippets de los media queries


Si estáis desarrolando un sitio o aplicación web Responsive (adaptativa)  y todavía no sabes que Media Queries utilizar para los dispositivos que estás soportando el artículo de hoy te vendrá perfecto!

Antes de todo...Que se entiende por Media Query Snippets?

Se llaman Media Query Snippets  pequeños fragmentos de código elaborados con las media queries para detectar la mayoría de dispositivos que existen en el momento, desde los monitores normales de los portátiles o computadores de escritorio hasta los smartphones más conocidos, como el iPhone, HTC, Samsung Galaxy y el Blackberry Torch, por supuesto no pueden faltar las tablets, como las Acer Iconia, Google Nexus, iPads, Sony, Lenovo entre otras.

Más informaciones (en inglés): Media Query Snippets

Aquí tenéis algunos útiles ejemplos:

1. iPhone4

 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }

2. IPhone5

@media screen and (device-aspect-ratio: 40/71) {    }    or    
@media screen and (device-width: 320px) 
and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){    }

3. Samsung Galaxy S2

 @media only screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {}

4. Blackberry Torch

@media screen and (max-device-width: 480px) {     }

5. Blackberry Playbook

c) Code for Applying Styles in Portrait Mode :
 @media only screen (max-device-width: 600px) and (orientation: portrait) { }      

d) Code for Applying Styles in Portrait Mode :         
@media only screen (max-device-width: 1024 px) and (orientation: portrait) {}

6. Samsung S3

@media only screen and (-webkit-device-pixel-ratio: 2) {    }

7. Google Nexus 7

@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {    }

8. IPad Mini

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {    }

9. IPad 3

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {     }

Portrait

@media (max-device-width: 768px) and (orientation: portrait) {     }

10. Galaxy Tab 10.1

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {     }

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {     }
 
by Janeth Kent Date: 30-08-2013 snippets media query responsive web diseño desarrollo recursos tutoriales visitas : 9086  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Artículos relacionados

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

El concepto de Modelo-Vista-Controlador (MVC) explicado

En la ingeniería de software, usamos patrones de diseño como soluciones reutilizables para un problema común, un patrón es como una plantilla de cómo resolver un problema. El Modelo-Vista-Controlador (MVC) es…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Introducción a RegExp - Expresiones regulares

Hoy vamos a escribir sobre las Expresiones Regulares conocidas como regex o regexp abreviado, un concepto muy útil de uso de patrones de búsqueda. Seguramente usted estaba en una situación en…

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

¿Cómo se eliminan múltiples filas con diferentes identificaciones en una Query SQL?

Para los ejemplos de este artículo, supongamos que tenemos una tabla con identificaciones únicas que vamos a utilizar para eliminar varias filas en una sola consulta. Por supuesto, también…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Cómo escribir nuestra propia Política de Privacidad

En este artículo hablaremos de las declaraciones de la Política de Privacidad, de cómo puedes escribir una y ponerla en práctica en tu página. ¿Por qué apareció? Hoy en día, cuando navegamos…

Facebook nos sugiere tres preguntas para reconocer las noticias falsas y no compartirlas

¿De dónde viene? ¿Qué falta? ¿Cómo te sientes? Estas son las tres preguntas que Facebook recomienda a todos los usuarios que se hagan antes de compartir las noticias. La iniciativa…

El mejor software y aplicaciones gratuitos de streaming en directo para todas las plataformas

Estamos en una lenta transición hacia un mundo hecho de transmisiones en streaming. Ya sea que quieras transmitir en vivo o capturar contenido de la web, las opciones son ilimitadas.…

El efecto Dunning-Kruger, o por qué la gente opina de todo sin tener ni idea

El efecto Dunning-Kruger puede resumirse en una frase: cuanto menos sabemos, más creemos saber. Es un sesgo cognitivo según el cual, las personas con menos habilidades, capacidades y conocimientos tienden…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración