Semana 3 Responsive Design y Media Queries

RESPONSIVE DESIGN:
MEDIA QUERIES
Mg. Richard E. Mendoza G.

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

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

<link rel="stylesheet" media="(max-width: 800px)"
href="example.css" />

<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>

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) {...}

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

* {
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>
</main>
</body>
</html>
MOSTLY FLUID
@media (min-width: 600px) {
.c2,
.c3,
.c4 {
width: 50%;
}
}
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.c1 {
width: 60%;
}
.c2 {
width: 40%;
}
.c3,
.c4 {
width: 33%;
}
.c5 {
width: 34%;
}
}

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.

LAYOUT SHIFTER
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width, initial-
scale=1.0" />
</head>
<body>
<div class="c4">
</div>
</main>
</body>
</html>
* {
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 {
}
.c2 {
background-color: #0062d2;
}
.c3 {
background-color: #b4d2f7;
}
.c4 {
background-color: #d5dfef;
}
.c5 {
background-color: #dfe1e5;
}
.c1 {
width: 25%;
}
.c4 {
width: 75%;
}
.c5 {
width: 100%;
}
}
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.c1 {
width: 50%;
order: 1;
}
.c4 {
width: 100%;
}
.c5 {
width: 50%;
order: 2;
}
}

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.

COLUMN DROP
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width, initial-
scale=1.0" />
</head>
<body>
</main>
</body>
</html>
* {
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 {
}
.c2 {
background-color: #0062d2;
}
.c3 {
background-color: #b4d2f7;
}
.c4 {
background-color: #d5dfef;
}
.c5 {
background-color: #dfe1e5;
}
.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;
}
}
.c1 {
width: 30%;
}
.c2 {
width: 40%;
}
.c3 {
width: 30%;
}
.c4 {
width: 50%;
}
.c5 {
width: 50%;
}
}

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.

Semana 3 Responsive Design y Media Queries

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Semana 3 Responsive Design y Media Queries

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

Mais de Richard Eliseo Mendoza Gafaro

Mais de Richard Eliseo Mendoza Gafaro (20)

Último

Último (20)

Semana 3 Responsive Design y Media Queries