Guía de Taller
Diseño y Maquetación Web – Maquetando una web responsiva 1
_______________________________________________________________________
uía
Diseño y Maquetación Web
Maquetando una web responsiva
Sesión 8
LOGRO DE LA SESIÓN
Diseña un sitio web responsivo mediante la maquetación con directivas de CSS y Media Query
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
MEDIA QUERY
La media query es una técnica CSS introducida en CSS3.
Se utiliza la regla @media para incluir un bloque de propiedades CSS solo si una determinada condición es
verdadera.
Ejemplo
Si la ventana del navegador tiene 600 px o menos, el color de fondo será azul claro:
Agregar un punto de interrupción
Podemos agregar un punto de interrupción donde ciertas partes del diseño se comportarán de manera diferente
en cada lado del punto de interrupción.
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
Diseño y Maquetación Web – Maquetando una web responsiva 2
_______________________________________________________________________
Use media query para agregar un punto de interrupción en 768px:
Ejemplo
Cuando la pantalla (ventana del navegador) es más pequeña que 768px, cada columna debe tener un ancho del
100%:
Agregando otro punto de ruptura
Puede agregar tantos puntos de interrupción como desee. También insertaremos un punto de ruptura entre
tabletas y teléfonos móviles.
Hacemos esto agregando una consulta de medios más (a 600 px) y un conjunto de nuevas clases para dispositivos
de más de 600 px (pero menores de 768 px):
Diseño y Maquetación Web – Formación Continua
Diseño y Maquetación Web – Maquetando una web responsiva 1
_______________________________________________________________________
uía
Diseño y Maquetación Web
Maquetando una web responsiva
Sesión 8
LOGRO DE LA SESIÓN
Diseña un sitio web responsivo mediante la maquetación con directivas de CSS y Media Query
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
MEDIA QUERY
La media query es una técnica CSS introducida en CSS3.
Se utiliza la regla @media para incluir un bloque de propiedades CSS solo si una determinada condición es
verdadera.
Ejemplo
Si la ventana del navegador tiene 600 px o menos, el color de fondo será azul claro:
Agregar un punto de interrupción
Podemos agregar un punto de interrupción donde ciertas partes del diseño se comportarán de manera diferente
en cada lado del punto de interrupción.
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
Diseño y Maquetación Web – Maquetando una web responsiva 2
_______________________________________________________________________
Use media query para agregar un punto de interrupción en 768px:
Ejemplo
Cuando la pantalla (ventana del navegador) es más pequeña que 768px, cada columna debe tener un ancho del
100%:
Agregando otro punto de ruptura
Puede agregar tantos puntos de interrupción como desee. También insertaremos un punto de ruptura entre
tabletas y teléfonos móviles.
Hacemos esto agregando una consulta de medios más (a 600 px) y un conjunto de nuevas clases para dispositivos
de más de 600 px (pero menores de 768 px):
Diseño y Maquetación Web – Formación Continua
