PROGRAMACIÓN WEB| Dania Lima Cabezas

MAQUETACIÓN WEB CON HTML5

1.1.-INTRODUCCIÓN
Con un buen etiquetado a base de <div>, se puede estructurar correctamente un
documento y separarlo en bloques lógicos. Un problema añadido más importante, es
la distinción entre el tipo de contenido de que se trate. ¿Cómo resuelve HTML5 este
problema? Entre otros métodos, con la implantación de nuevas etiquetas. Aunque en
apariencia estas etiquetas se comportan de forma similar al clásico <div>, también
ofrecen información suplementaria sobre el significado y/o importancia de lo que
contienen. Y además hacen posible que los documentos se estructuren de una forma
más nítida. En su construcción y cuando llega el momento del análisis.

1.2.-ETIQUETAS
• <article> La finalidad de esta etiqueta es la marca de un artículo. Hay que tener
en cuenta que, normalmente, se tratará de un texto que se puede leer con
independencia del resto del contenido de la página en cuestión.
• <aside> Lo que hace <aside> es marcar un elemento como accesorio del
contenido principal de la página. Como ejemplos, están el de los comentarios
que realicen los usuarios, una barra lateral, y muchos otros.
• <header> La etiqueta <header> es muy práctica para ofrecer información sobre
el encabezado del elemento que lo contiene. Aunque se utiliza mucho como
introducción, esta etiqueta no necesariamente será una sola en la Web. Es
decir, pueden existir etiquetas <header> para un artículo concreto, para un
texto, para una columna en el lateral de la Web, etc.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

• <main> El contenido de la etiqueta <main> suele ser el objeto principal del

documento. Se diferencia de otras etiquetas (como hemos visto en <header>),
que <main> sí debe ser única en la página. Entre cosas, porque de otro modo
perdería todo su significado. Es de sentido común que, en un mismo
documento, no puede haber diferentes contenidos principales.
• <figure> y <figurecaption> Esta etiqueta, <figure>, indica que su contenido es
una imagen concreta. Puede ser un gráfico, una fotografía, una figura, etc. Por
su parte, <Figurecaption> normalmente va asociada al texto explicativo que
acompaña las imágenes. El mejor ejemplo es el de un pie de foto.
• <nav> <nav> es la nueva etiqueta que se usa para indicar bloques de links de
navegación. Es frecuente, por ejemplo, en el caso de las barras de navegación.
La etiqueta <nav> no se debe usar con la totalidad de link que integre la Web,
sino únicamente para bloques de links.
• <section> Con ella, como su propio nombre indica, se define una sección
determinada, de un documento.

• <footer> La etiqueta <footer> sirve para indicar que el contenido es un pie de

página o sección. Por ello, contendrá datos sobre el elemento concreto al que
va asociada.
1.3.-Técnicas de diseño HTML
Módulo de diseño CSS Flexbox
Antes del módulo Flexbox Layout, había cuatro modos de diseño:
• Bloque, para secciones de una página web
• Inline, para texto
• Tabla, para datos de tablas bidimensionales
• Posicionado, para la posición explícita de un elemento
El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño
flexible y receptiva sin usar flotador o posicionamiento.
1.3.1.-Qué es Flex
Flex es uno de los nuevos valores HTML5 para propiedad CSS display, que nos permite
maquetar nuestras páginas web de una manera mucho más fácil de lo que se hacía con
la forma tradicional, en la que utilizábamos propiedades como float o position, entre
otras.
Por qué Flex
Se llama Flex porque tenemos un contenedor, llamado contenedor Flex, que es el
elemento que contiene la propiedad display:flex.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

Desde ese contenedor vamos a poder especificar la alineación de los elementos que
hay dentro, el tamaño de los elementos que contienen y distribuir el espacio restante
que hay entre los elementos del contenedor Flex, y todo esto en una sola dirección, ya
sea una horizontal o vertical. Es decir, podemos distribuir los elementos que contiene
la etiqueta sin poner nada dentro de esos elementos.
Flex a nivel visual
Vamos a ver dos ejemplos para ver cómo funciona de verdad:

Ambos son contenedores Flex, el primero es un contenedor Flex a nivel horizontal que
contiene tres elementos flexibles, el segundo es un contenedor Flex a nivel vertical que
contiene tres elementos flexibles.
Únicamente dando propiedades al contenedor Flex podemos alinear todos los
elementos que están dentro del mismo.
Aspectos a tener en cuenta
Hay ciertas cosas con las que tener cuidado, como por ejemplo que a día de hoy no
todos los navegadores soportan contenedores Flex. Aunque es cierto que la gran
mayoría de los navegadores que usamos diariamente ya lo soportan, no obstante hay
que tener cuidado porque no todos los navegadores de los móviles lo soportan.

1.3.2.-Propiedades Flex
1.- Propiedad flex-direction
 PROGRAMACIÓN WEB| Dania Lima Cabezas

Esta propiedad nos sirve para definir la dirección del flujo de colocación de los
elementos. Tiene que ver con los ejes que conocimos en el artículo anterior, pudiendo
marcar si los elementos se van a colocar todos en la misma fila, o si se van a colocar en
una columna, pero además también permite indicar el orden de los item, normal o
reverso.
Permite usar estos valores:
• row (valor predeterminado): Indica que los elementos se colocan en una fila,
uno al lado del otro, de izquierda a derecha.
• row-reverse: se colocan en una fila, pero con orden de derecha a izquierda.
• column: se colocan uno debajo del otro, en orden los primeros arriba.
• column-reverse: se colocan en una columna, pero los primeros aparecerán
abajo.
2.- Propiedad flex-wrap
Sirve para indicar si queremos que haya saltos de línea en los elementos que se
colocan en el contenedor, si es que éstos no caben en el espacio disponible.

De manera predeterminada con Flexbox los elementos se colocan en el eje de la

horizontal, en una fila. Si los elementos tienen unas dimensiones tales que no quepan
en el contenedor, el comportamiento flex hará que se intenten agrupar en la fila de
manera que quepan bien sin saltar de línea, pero también podemos configurarlo para
hacer que, si no caben, se pasen a la línea siguiente.
• nowrap (predeterminado): hace que nunca se produzcan saltos de línea.
• wrap: hace que si no caben, entonces se coloquen en la siguiente línea.
• wrap-reverse: El salto de línea se producirá al contrario, o sea, hacia arriba.
3.- Propiedad justify-content
Esta propiedad es muy útil para indicar cómo se van a colocar los justificados y
márgenes de los ítems. Puedes indicar que vayan a justificados al inicio del eje o al final
del eje o que a la hora de distribuirse se coloque un espacio entre ellos o un espacio
entre ellos y los bordes.
Es interesante como para tratarla de manera independiente y así poder ver varios
ejemplos de ella. Veamos simplemente sus posibles valores:
• flex-start: Añade los elementos a partir del inicio del eje principal.
• flex-end: Añade los elementos a partir del final del eje principal.
• center: los elementos se centran en el espacio del contenedor, siempre con
respecto al eje principal.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

• space-between: hace que los elementos se distribuyan con un espacio

proporcional entre ellos, siendo que los ítem de los extremos se sitúan en el
borde del contenedor.
• space-around: es parecido a space-between en el sentido de dejar un
espaciado proporcional, sin embargo, en esta ocasión se deja también espacio
entre el borde del contenedor y los ítem de los extremos.
Lo veremos todo más claro observando la siguiente imagen:

4.- Propiedad align-items

Esta propiedad es muy similar a la propiedad anterior, justify-content, solo que ahora
estamos alineando con respecto al eje secundario y no el principal.
En el caso de un contenedor flex cuyo eje principal está en la horizontal, entonces
align-items servirá para obtener el alineamiento en el otro eje (vertical, de arriba a
abajo). En definitiva, align-items nos ofrece el tan deseado alineamiento vertical que
hemos echado en falta en CSS históricamente.
También merece hacer ejemplos específicos para verlo con más detalle, por lo que
ahora nos limitaremos a enumerar sus posibles valores con una breve descripción.
• flex-start: indica que se posicionarán al comienzo del eje secundario.
• flex-end: se posicionarán al final del eje secundario.
• center: se posicionarán en el centro del eje secundario.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

• stretch: ocuparán el tamaño total del eje secundario (a no ser que hayamos
marcado que esos elementos tengan un tamaño diferente).
• baseline: para el posicionamiento de los elementos se tendrá en cuenta el texto
que hay escrito dentro.
Como una imagen vale más que mil palabras, se pueden ver aquí los distintos efectos
con bastante claridad.

5.- Propiedad align-content

Esta propiedad sólo aplica cuando dispones de varias líneas de elementos en el
contenedor flexbox. El efecto que conseguiremos será una alineación y separación de
las filas en el eje secundario.
Nota: Para conseguir varias líneas de elementos en el contenedor flex necesitarás
aplicarles un "flex-flow: wrap" y por supuesto que haya suficientes elementos, con
suficiente anchura, para que se necesiten varias filas para su distribución.
Al final, el efecto que conseguimos con align-content es parecido al que conseguimos
con align-items, en el sentido que aplicará al eje secundario su efecto de distribución,
solo que aquí no estamos indicando la colocación de una única fila, sino de todas las
filas. Además se parece también a justify-content en el sentido que estamos
definiendo la separación entre ítems, pero afectando a filas de ítems en vez de ítems
sueltos.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

• flex-start: indica que las filas se colocarán todas pegadas entre sí (obviamente
no aparecerán exactamente pegadas si le hemos colocado un margin), desde el
inicio del eje secundario.
• flex-end: las filas se colocarán pegadas entre sí, pero esta vez pegadas al final
del eje secundario.
• center: se posicionarán en el centro del eje secundario, pegadas entre sí.
• stretch: Sus dimensiones crecerán para ocupar todo el espacio disponible (a no
ser que se haya colocado una dimensión diferente en los elementos).
• space-between: indica que las filas se separarán entre sí, dejando un espacio
proporcional entre ellas.
• space-around: indica que las filas se separarán, dejando un espacio entre ellas
proporcional, también con el borde.
Creo que se entenderá mejor a la vista de la siguiente imagen.
PROGRAMACIÓN WEB| Dania Lima Cabezas
 PROGRAMACIÓN WEB| Dania Lima Cabezas

Veamos las propiedades que puedes poner a los hijos de los contenedores Flexbox
para alterar su disposición.
Ahora vamos a aprender cosas que tienen que ver con los ítem, es decir los hijos
directos de los contenedores que se comportan bajo el estándar Flexbox. Veremos las
propiedades o atributos que se pueden aplicar a los hijos, junto con descripciones y
ejemplos. Son menos que las que se pueden aplicar a los contenedores, así que te será
más fácil de acordarte de todo.

Quizás resulta obvio, pero no está de más recordar a qué nos referimos con
contenedores e ítems. Quedará claro a la vista de esta imagen:

1.3.3.1.-Propiedad flex-grow
La propiedad flex-grow sirve para decir cómo deben crecer los elementos incluidos en
el contenedor, es decir, cómo distribuir el espacio entre ellos, haciendo que ocupen
más o menos espacio. El valor que acepta es numérico e indica la proporción de
espacio que va a ocupar.
A mi me resulta la más útil de todas las propiedades de los ítem, que además es
bastante versátil. El ejemplo más típico para poder entender flex-grow lo podemos ver
en el siguiente ejemplo:

1.3.3.2.-Propiedad order
 PROGRAMACIÓN WEB| Dania Lima Cabezas

No necesita muchas explicaciones. Admite un valor numérico entero y sirve para

aplicar un orden puramente arbitrario en la disposición de los elementos.
Propiedad align-self
Esta propiedad sirve para modificar el valor de align-items marcado por el contenedor
principal. Como ya sabes por el artículo anterior de Propiedades Flex para
Contenedores, align-items nos permite definir el alineamiento en el eje secundario del
contenedor (lo que se traduce por el alineamiento vertical en el caso de elementos
que se posicionan en una fila. Con align-items podemos definir el alineamiento de
todos los elementos a la vez y sin embargo con align-self podemos sobreescribirlo para
un ítem concreto.
Lo puedes seguramente entender mejor con la siguiente imagen.

1.3.3.3.-Propiedad flex-shrink
Sirve para indicar que ciertos ítems deben encoger su tamaño. El valor
predeterminado de flex-shrink es de 1. Cualquier valor superior indica que ese
elemento se encogerá con respecto a lo que ocuparía si no tuviera esa propiedad. A
mayor valor de flex-shrink, más reducido será el tamaño resultante del elemento.
1.3.3.4.-Propiedad flex-basis
Esta propiedad sirve para modificar las dimensiones de los elementos atendiendo a
varias posibilidades. La propiedad sobre el papel sirve para definir el tamaño
predeterminado de un elemento, pero antes de que el espacio sobrante sea
distribuido, cuando proceda, por causa de otras propiedades como flex-grow.
Los valores que soporta son los siguientes:
• Numéro, unidad CSS o porcentaje: lo que indica las dimensiones iniciales del
elemento, antes de otorgar espacio sobrante.
• auto: es el valor predeterminado e indica que flex-basis no va a tener efecto,
otorgando dimensionamiento en función de cualquier otro atributo que pueda
haber en el elemento, o en función del contenido del propio elemento.
Nota: flex-bases es una propiedad menos obvia que otras conocidas anteriormente.
Sabemos que las dimensiones de los elementos se pueden modificar directamente con
width y height, que también tenemos flex-grow para otorgar más espacio y flex-shrink
para encoger los elementos. Quizás pensarás que cuesta encajar este nuevo atributo,
pero la clave es que permite indicar unas veces la anchura y otras la altura, en función
 PROGRAMACIÓN WEB| Dania Lima Cabezas

del eje principal de los elementos flexbox definido en el contenedor. Cuando el eje
está en la horizontal, flex-basis aplica a la anchura de los elementos. Cuando el eje está
en la vertical, entonces flex-basis aplica a la altura de los elementos.
1.3.3.5.-Propiedad flex
Esta no agrega nada nuevo. Es solo un atajo para escribir en una sola línea de código
CSS las propiedades flex-grow, flex-shrink y flex-basis. El valor por defecto de esta
propiedad es "0 1 auto".
1.4.-Conclusión
Con este resumen hemos conocido ya todas las propiedades que afectan a los ítems,
que junto con las propiedades que afectan a los contenedores repasadas en la anterior
entrega del manual, componen todo el material que debes conocer del estándar CSS
Flexbox.
Ahora nos queda practicar bastante, revisando ejemplos completos en las siguientes
entregas, con los que dominar Flexbox con casos reales y útiles en el día a día.
1.5.-Propiedad grid

Qué es el CSS Grid Layout

En palabras de Rachel Andrew:
CSS Grid Layout es una especificación para la creación de rejillas bidimensionales. Te da
la posibilidad de establecer en la página web una grilla y colocar con precisión los
elementos ella. La especificación se encuentra actualmente en estado de borrador de
trabajo.
El módulo CSS Grid Layout y el de Caja flexible (FlexBox) son complementarios. Flexbox
está diseñado para el diseño en una sola dimensión, así que las cosas se pueden
manejar en una línea ininterrumpida. CSS Grid Layout está diseñado para la disposición
en dos dimensiones, es decir, sus ítems no tienen que ubicarse uno al lado del otro. En
el futuro es seguro que utilicen conjuntamente: Diseño de cuadrícula depara los
bloques principales de la página y FlexBox para los elementos de interfaz de usuario
más pequeños.
Terminología del CSS Grid Layout
Antes de continuar, un poco de terminología propia del CSS Grid Layout para tener
claros sus conceptos básicos:
 PROGRAMACIÓN WEB| Dania Lima Cabezas

Terminología básica del Css Grid Layout

Grid container o contenedor grid
Es el elemento contenedor en el que se establece la rejilla o grilla.
Grid Items
Los elementos hijos directos de la caja grid.
Grid lines o líneas de la rejilla
Son los divisores horizontales y verticales. Se utilizan para crear "grid tracks", "grid
cells" y "grid areas". Por defecto y para identificarlas tienen un índice numérico, u
opcionalmente se les puede dar nombres específicos.
Grid track
El espacio entre dos líneas paralelas. Las líneas son de utilidad para indicar dónde
empieza y termina el contenido y los tracks en dónde se aloja.
Grid cell
Una celda es el espacio definido por dos líneas horizontales y dos verticales
consecutivas.
Grid area
Un área es una figura rectangular que cubre un número arbitrario de celdas
adyacentes. A las áreas, como a las líneas, puede dárseles nombres.
Creando el Grid Layout
Para lograr que un elemento genere una rejilla, a semejanza del flexbox, hay que
declarar al elemento display: grid; o display:inline-grid
Pero este valor de la propiedad display únicamente prepara el terreno. Por sí sólo aún
no ha creado ninguna rejilla. Para ello la especificación define tres propiedades más:
 PROGRAMACIÓN WEB| Dania Lima Cabezas

1. grid-template-rows
2. grid-template-columns
3. grid-template-areas

¿Qué tipo de rejillas son posibles?

En resumen: En realidad, casi todas las cuadrículas que se te ocurran y muchas

más. Elija libremente el espacio, el tamaño y la ubicación de los diferentes elementos

de la cuadrícula. Puede encontrar una buena descripción general de las cuadrículas más

comunes con marcado en Grid by Example .

1.6.-Diseño response
Es fundamental tener una página web responsive, es decir, optimizada para todo tipo
de dispositivo. De manera general podemos distinguir dos formas de
optimización: “Responsive Web Design” y “Mobile First Web”.
¿En qué se diferencian Responsive Web Design y Mobile First Web?
Aunque van de la mano, hay que diferenciar entre Responsive Web Design o, lo que
viene a ser lo mismo, Diseño Web Adaptativo, y Mobile First Web. Como su propio
 PROGRAMACIÓN WEB| Dania Lima Cabezas

nombre indica, el Diseño Web Adaptativo es aquel capaz de adaptarse a diferentes

tamaños y dispositivos, es decir, dependiendo de qué dispositivo sea en el que se
cargue, tu sitio web se verá más accesible y fácil de usar. Sin embargo, lo que propone
el término Mobile First es empezar a diseñar un sitio web desde la resolución más
pequeña para ir creciendo y adaptando el contenido y el diseño a la resolución más
grande.
Hasta ahora todos los sitios web han sido diseñados solo para equipos de sobremesa y
el proceso de navegar por las webs en los teléfonos móviles era bastante incómodo,
debido a una mala experiencia de usuario. Sin embargo, las tecnologías están
cambiando y el principio de Mobile First se está convirtiendo en un concepto cada vez
más extendido.

¿Qué conseguimos con el principio Mobile First?

Si empezamos maquetando un sitio web para la versión de escritorio y un usuario se
conecta desde un dispositivo, primero cargará todo el contenido utilizado en la
primera versión, hasta cargar los recursos necesarios para móvil. Por lo tanto, lo más
recomendable es empezar a maquetar para la versión más pequeña, siempre
optimizando el contenido que se utilice (hojas de estilos, ficheros, imágenes…),
así conseguiremos que el usuario no cargue más recursos de los necesarios,
reduciendo el tiempo de carga del sitio web.
La clave es conocer el tamaño, resolución o posibles orientaciones de las pantallas en
las que necesitamos mostrar nuestro contenido basándonos en los usuarios que
tenemos como objetivo.
Los pilares principales del Responsive son las Media Queries y la etiqueta Viewport.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

1.6.1.- Media Queries

Las Media Queries son las herramientas fundamentales que se encargan de aplicar
diferentes estilos para diferentes dispositivos, y proporcionan la mejor experiencia
para cada tipo de usuario que se encuentra navegando en tu sitio web. Nacen de la
necesidad de crear breakpoints o puntos de ruptura en la hoja de estilos CSS que
tengas predefinida. Permite que tu sitio Web sea manejable desde diferentes
dispositivos.

Si no te ha quedado muy claro, las Media Queries son un módulo de CSS que sirve
para detectar el tipo de dispositivo por el que se está navegando; de esa manera el
contenido consigue adaptarse al dispositivo concreto a través de las distintas
condiciones que tú mismo asignas, como pueden ser ancho y alto de la ventana del
navegador, ancho y alto del dispositivo, la resolución del dispositivo o la orientación de
la pantalla. Son declaraciones lógicas que actúan dependiendo de las condiciones
específicas que tú mismo declaras en la hoja de estilos. Si la premisa se cumple, se
aplicaran los estilos definidos; si no, los omitirá por completo.
Hay dos formas de implementarlas:
La primera opción para poner en funcionamiento las Media Queries es a través del
atributo media de la etiqueta <link>. Como sabemos, esta etiqueta es la que se usa
para enlazar una hoja de estilo con un documento HTML. En ese enlace
podemos especificar condiciones que deben cumplirse para que los estilos enlazados
se apliquen. Debería ir dentro del <head> de nuestro HTML.
Recuerda que la etiqueta <link> tiene esta forma:
<link rel="stylesheet" href="estilos.css">
Pues ahora simplemente agregamos el atributo media indicando la condición que se
debe cumplir para que estos estilos se apliquen:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="estilos.css">

Lo que concretamente le estamos indicando es que cargue la hoja de estilos

“estilos.css” si se cumple que el dispositivo de salida es una pantalla, no una
 PROGRAMACIÓN WEB| Dania Lima Cabezas

impresora u otro dispositivo (only screen), y si la anchura de la ventana del

navegador tiene de máximo 768 píxeles (max-width: 768px).
Si se cumplen las condiciones, los estilos se mostraran correctamente, en caso
contrario, los estilos se omiten por completo, y el contenido se muestra sin estilos
definidos:

Cargar de esta manera las Media Queries supone un problema, y es que cada vez que
queramos cargar diferentes estilos dependiendo de ciertas condiciones que queramos
aplicar para distintos dispositivos, tendríamos que cargar una hoja de estilos nueva.
Esto conlleva una carga más lenta de tu sitio web, ya que se hacen solicitudes HTTP
adicionales, que se podrían evitar.
Hay otro sistema más recomendable para aplicar las Media Queries: basta con incluir
todas las condiciones necesarias dentro de un único archivo
CSS. Así, incorporaríamos la construcción @media seguido de las condiciones que
queremos definir para cada tipo de dispositivo y donde se apliquen entre llaves { } los
estilos concretos para cada uno de ellos. Es la manera más aconsejable, ya que la carga
es de un único archivo CSS.
La forma de incluir Media Queries dentro de la hoja de estilos CSS es la siguiente:
@media (max-width:320px){
<!—- Aquí van todos los estilos CSS -->
}

Esta Media Query se ejecutará sólo cuando la anchura de la ventana del navegador
sea menor de 320 píxeles.
@media (min-width:768px){
<!—- Aquí van todos los estilos CSS -->
}
Esta Media Query se ejecutará sólo cuando la anchura de la ventana del navegador
sea mayor de 768 píxeles.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

Además de las características para determinar las resoluciones y anchos de

pantalla, podemos determinar otros parámetros, como por ejemplo la orientación del
dispositivo, importante en dispositivos móviles:
@media (orientation: landscape) {
<!-- Aquí van todos los estilos CSS -->
}
• Portrait: orientación vertical
• Landscape: orientación horizontal

Operadores lógicos para las Media Queries

También se pueden combinar más de una condición en la misma Media Query para
concretar todavía más un rango de resolución, mediante los operadores lógicos:
• Operador and: las dos condiciones deben cumplirse para que se apliquen los
estilos.
• Operador not: es una negación de una condición. Cuando esta condición no se
cumpla, se aplicarán las media queries definidas.
• Operador only: se aplican las reglas solo en el caso de que se cumpla.
• Operador or: se pueden poner varias condiciones separadas por comas y en el
momento que se cumpla cualquiera de ellas, se aplicarán los estilos.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

@media only screen and (min-width:320px) and (max-width:480px){

<!—- Aquí van todos los estilos CSS -->
}
Para esta Media Querie se mostrarán los estilos CSS cuando la anchura de la ventana
del navegador sea entre 320 pixeles y 480 pixeles, ambos incluidos.
Estos son algunos de los parámetros generales que se pueden emplear a la hora de
construir las condiciones en las Media Queries:
• width: anchura de la ventana del navegador.
• height: altura de la ventana del navegador.
• device-width: anchura de la resolución de pantalla.
• device-height: altura de la resolución de pantalla.
• orientation (portrait/landscape): dispositivo en horizontal o en vertical.
• resolution: densidad de píxeles.
Excepto la orientación, el resto de parámetros admiten los valores “max” y “min”.
• max-width: La anchura será menor que la indicada.

• min-width: La anchura será mayor que la indicada.

Una cosa muy importante que debemos tener en cuenta a la hora de utilizar las Media
Queries, es diferenciar entre el ancho de ventana del navegador y la resolución de la
pantalla del dispositivo, es decir:
@media only screen and (min-device-width: 960px){
/* Aquí van todos los estilos CSS */
}
En esta Media Querie que hemos definido, el atributo min-device-width se refiere a la
resolución de la pantalla del dispositivo a la hora de cargar la hoja de estilos definida.
 PROGRAMACIÓN WEB| Dania Lima Cabezas

Esto quiere decir que si reducimos el ancho del navegador, seguirá mostrándose de la
misma manera, ya que la resolución de la pantalla seguirá siendo la misma y no se
adaptara al nuevo ancho de la ventana del navegador (es decir, si la pantalla de
nuestro móvil tiene 450 px y el navegador detecta que lo óptimo sería visualizarla con
600 px así lo hará si no usamos la meta-etiqueta Viewport).
En caso de usar los atributos para la resolución de la pantalla, la etiqueta Viewport es
necesaria.
¿Qué hace la meta-etiqueta Viewport?

El Viewport es el área visual donde se plasma el contenido del documento HTML de

tu sitio web. Se podría traducir como vista o ventana y nos sirve para definir qué área
de pantalla está disponible al renderizar un documento, la escala/zoom que debe
mostrar inicialmente.