Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Semana 3 Responsive Design y Media Queries

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Semana 3   Introduccion CSS
Semana 3 Introduccion CSS
Cargando en…3
×

Eche un vistazo a continuación

1 de 18 Anuncio

Más Contenido Relacionado

Similares a Semana 3 Responsive Design y Media Queries (20)

Anuncio

Más de Richard Eliseo Mendoza Gafaro (20)

Más reciente (20)

Anuncio

Semana 3 Responsive Design y Media Queries

  1. 1. RESPONSIVE DESIGN: MEDIA QUERIES Mg. Richard E. Mendoza G.
  2. 2. El Responsive Design o diseño adaptativo, es la técnica que se usa en la actualidad para tener una misma web adaptada a las diferentes plataformas que nos brinda la tecnología: ordenador, tablet y Smartphone. Consiste en una serie de hojas de estilo en CSS3, que usando el atributo “mediaquery” convierten una web ordinaria en una web multiplataforma capaz de adaptarse a todos los tamaños que existen, ofreciendo una experiencia para el usuario mucho más amena y cubriendo las necesidades de nuestro público. RESPONSIVE DESIGN
  3. 3. Las media queries (consultas de medios) son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo o de características y parámetros específicos. • Aplicar estilos condicionales con las reglas-at @media e @import de CSS. • Indicar medios específicos en los elementos <link>, <source> y otros elementos HTML. • Testear y monitorizar los estados de los medios usando los métodos de javascript Window.matchMedia() y MediaQueryList.addListener(). MEDIAS QUERIES <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a style sheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>
  4. 4. 6 • Como su propio nombre indica mobile first o por su traducción en inglés, «los móviles primero», resume perfectamente esta filosofía de desarrollo. • Básicamente se refiere a un modo de diseñar que tenga en cuenta, en primera instancia, un dispositivo móvil. Pantallas reducidas en comparación a los monitores que usamos normalmente con los ordenadores, y tras tener la maqueta preparada, realizar un escalado, es decir, aumentar el tamaño y adaptarlo a una pantalla de escritorio. MOBILE FIRST <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style_table.css" media="screen and (min-width: 768px)"> @media (min-width: 768px) {...} @media (min-width: 992px) {...} @media (min-width: 1200px) {...}
  5. 5. 7 • Mostly Fluid: El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las más anchas. PATRONES DE MAQUETACION
  6. 6. * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } .container { display: flex; flex-wrap: wrap; } .c1, .c2, .c3, .c4, .c5 { width: 100%; min-width: 150px; height: 150px; } .c1 { background-color: #003476; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./table.css" media="screen and (min-width: 600px)" /> <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)" /> </head> <body> <main class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </main> </body> </html> MOSTLY FLUID @media (min-width: 600px) { .c2, .c3, .c4 { width: 50%; } } @media (min-width: 800px) { .container { width: 800px; margin-left: auto; margin-right: auto; } .c1 { width: 60%; } .c2 { width: 40%; } .c3, .c4 { width: 33%; } .c5 { width: 34%; } }
  7. 7. 10 • Layout shifter: El patrón Layout shifter es el más adaptable, ya que posee varios puntos de interrupción en diferentes anchos de pantalla. PATRONES DE MAQUETACION
  8. 8. LAYOUT SHIFTER <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial- scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <main class="container"> <div class="c1"></div> <div class="c4"> <div class="c2"></div> <div class="c3"></div> </div> <div class="c5"></div> </main> </body> </html> * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } .container { display: flex; flex-wrap: wrap; } .c1,.c2,.c3,.c4,.c5 { width: 100%; min-width: 150px; height: 150px; } .c4 { height: auto; } .c1 { background-color: #003476; } .c2 { background-color: #0062d2; } .c3 { background-color: #b4d2f7; } .c4 { background-color: #d5dfef; } .c5 { background-color: #dfe1e5; } @media (min-width: 600px) { .c1 { width: 25%; } .c4 { width: 75%; } .c5 { width: 100%; } } @media (min-width: 800px) { .container { width: 800px; margin-left: auto; margin-right: auto; } .c1 { width: 50%; order: 1; } .c4 { width: 100%; } .c5 { width: 50%; order: 2; } }
  9. 9. 13 • Column drop: En el caso de los diseños con varias columnas de ancho completo, durante el proceso de colocación de columnas éstas únicamente se colocan de forma vertical debido a que el ancho de la ventana es demasiado reducido para el contenido. PATRONES DE MAQUETACION
  10. 10. COLUMN DROP <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial- scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <main class="container"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </main> </body> </html> * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } .container { display: flex; flex-wrap: wrap; } .c1,.c2,.c3,.c4,.c5 { width: 100%; min-width: 150px; height: 150px; } .c1 { background-color: #003476; } .c2 { background-color: #0062d2; } .c3 { background-color: #b4d2f7; } .c4 { background-color: #d5dfef; } .c5 { background-color: #dfe1e5; } @media (min-width: 600px) { .c1 { width: 25%; order: 1; } .c2 { width: 75%; order: 2; } .c3 { width: 100%; order: 3; } .c4 { width: 100%; order: 4; } .c5 { width: 100%; order: 5; } } @media (min-width: 800px) { .c1 { width: 30%; } .c2 { width: 40%; } .c3 { width: 30%; } .c4 { width: 50%; } .c5 { width: 50%; } }
  11. 11. 16 • Tiny tweaks: El patrón Tiny tweaks permite realizar pequeños cambios en el diseño, como ajustar el tamaño de la fuente, cambiar el tamaño de las imágenes o desplazar el contenido de maneras muy poco significativas. • Off canvas: En lugar de apilar contenido verticalmente, el patrón Off canvas coloca contenido menos usado. PATRONES DE MAQUETACION
  12. 12. https://www.mydevice.io/
  13. 13. https://mediaqueri.es/

×