Media queries CSS

Media Queries

En los Media Queries que voy a mencionar en este artículo te enseñaré los que estoy utilizando para los proyectos que me han tocado en estos años.

En el camino siempre me he topado con algunos obstáculos al momento de revisar en todos los dispositivos que he tenido a mi alcance, unos hasta me han sacado canas verdes, pero siempre se encuentra la solución.

Hay que tener en cuenta (a mi me sirvió mucho) que los queries comienzan desde 320 px hasta 1024 px que es el estándar (pero no canten victoria) en algunos casos sobrepasan los 1024 px de ancho.

Los dispositivos en los cuales he utilizado los queries que manejo son:

  1. Samsung Galaxy S4 S5 S6-S6Edge
  2. Samsung Galaxy tab4
  3. iPod
  4. iPhone 5 6 6S
  5. iPad Mini

En lo que respecta a desktop siempre manejo un querie standar (960px) y desde ahí arranco para las resoluciones mayores a 1024px.

Navegadores:

  1. Ie9+
  2. Edge
  3. Safari Windows y Mac
  4. Chrome
  5. Firefox

Para comenzar mis proyectos siempre arranco de 0 en lo que es html, css y javascript; claro utilizando algunas librerías que ayudan a terminar los proyectos.

Bueno terminemos la palabrería y comencemos 😀

iPad Media Queries (Todas las generaciones – incluyendo iPad mini)

iPad en portrait y landscape

iPad en landscape

iPad en portrait

iPad 3 y 4 Media Queries

Retina iPad en portrait y landscape

Retina iPad en landscape

Retina iPad en portrait

iPad 1 y 2 Media Queries

iPad 1 y 2 en portrait y landscape

iPad 1 y 2 en landscape

iPad 1 y 2 en portrait

iPad mini Media queries

iPad mini en portrait y landscape

iPad mini en landscape

iPad mini en portrait

iPad mini Resolution

iPhone 6 Media Queries

iPhone 6 en portrait y landscape

iPhone 6 landscape

iPhone 6 portrait

iPhone 6 Plus Media Queries

iPhone 6 Plus en portrait y landscape

iPhone 6 Plus en landscape

iPhone 6 Plus en portrait

iPhone 5 y 5S Media Queries

iPhone 5 y 5S en portrait y landscape

iPhone 5 y 5S en landscape

iPhone 5 y 5S en portrait

iPhone 2G, 3G, 4, 4S Media Queries

iPhone 2G-4S en portrait y landscape

iPhone 2G-4S en landscape

iPhone 2G-4S en portrait

iPhone 5 Resolution

iPhone 4/4S Resolution

iPhone 2G/3G/3GS Resolution

Samsung Galaxy

Galaxy Tab 4 en portrait y landscape

Galaxy Tab 4 en portrait

Galaxy Tab 4 en landscape

Galaxy S4, S5, S6-S6Edge en portrait y landscape

Galaxy S4, S5, S6-S6Edge en landscape

Galaxy S4, S5, S6-S6Edge en portrait

Ahora los media queries basicos

Espero que les haya sido de mucha utilidad y no se olviden de compartir 😀

(Visited 49 times, 1 visits today)

Facebook Auto Publish Powered By : XYZScripts.com