Contenidos

1 Posicionamiento de elementos

Posicionamiento de elementos

El posicionamiento ‘clásico‘ de elementos se basa en el modelo de bloques, los cuales se van colocando para llenar el espacio de la página de izquierda a derecha y de arriba abajo

Sin embargo, este modelo no se adapta bien en los dispositivos móviles, donde nos encontraremos con problemas con el tamaño, la orientación en el navegador e incluso en la reordenación de los elementos para que se ajusten al tipo de dispositivo

Para solucionar estos problemas apareció el modelo de posicionamiento flexible, el cual simplifica esas tareas considerablemente

Sin embargo, este modelo es demasiado detallado para organizar la estructura general de la página web

Por esa razón, se está imponiendo el modelo de rejilla, el cual divide el espacio en una rejilla virtual y crea una matriz dividida en celdas dentro de esa rejilla, asignando los elementos a una celda concreta que ocuparan tantas celdas adicionales dependiendo del tamaño y orientación del dispositivo

Estos dos modelos admiten además el denominado diseño adaptativo (responsive desing), el cual permite que nuestra página web se adapte al dispositivo en el que será visualizada: teléfonos inteligentes, tabletas o PCs de escritorio

Modelo de bloque

Las cajas de los elementos se colocan por defecto siguiendo el ‘flujo normal‘, es decir, empujando las cajas hacia la izquierda y hacia arriba

Puede utilizarse la propiedad position para modificar el ‘flujo normal‘:

position: static es el modo de posicionamiento por defecto
La caja ocupará la posición del ‘flujo normal‘
position: relative utilizando la propiedades top, right, bottom y left desplazamos su posición
Estas dimensiones indican el espaciado que se deja a cada lado de acuerdo con la posición original de la caja
El resto de las cajas no se ven afectadas por este desplazamiento, por lo que respetan su espacio reservado
position: absolute se elimina la caja del flujo normal y se coloca la nueva caja en una posición fija con respecto a su caja contenedora
Admite las propiedades top, right, bottom y left
Puede superponerse a otros elementos porque no se respeta su espacio reservado
position: fixed similar al posicionamiento absolute, pero se especifica la posición con respecto a la ventana
Esto implica que la caja mantiene su posición y que no se moverá cuando se use la barra de desplazamiento
position: float la caja se desplazará hacia un lado usando la propiedades left o right, desplazandola hacia uno de los extremos de la caja contenedora o hasta la primera caja flotante que encuentre en esa dirección
Puede superponerse a otros elementos que no sean cajas flotantes
clear sólo será aplicable si hay cajas flotantes, fuerza a que el elemento se muestre debajo de la caja flotante de un determinado tipo con las propiedades left o right; o de cualquiera con both

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'/>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div id='a'></div>
       <div id='b'>
           <div id='c'></div>
       </div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing
       elit. Maoires est voluptas dolorem quod id neque
       esse doloribus saepe ut reprehenderit possimus fugit.
       Laudantium distinctio doloribus repellendus quibusdam
       voluptatem recusandae aut</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing
       elit. Doloremque nam illum eveniet iste commodi culpa
       vel quibusdam sint veniam itaque provident sed ipsum
       reiciendis labore beatae impedit vitae earum aut</p>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732178978&k=402a6be813102f12e661a4587b48ace6&__muid="></script>
<!-- Inserted by miarroba -->
</body> 
</html>

Vamos a usar este html de ejemplo para poder comprobar el uso del modelo de bloque, para ello usaremos como base, la siguiente hoja de estilos de ejemplo:

div#a {
    background: blue;
    width: 2em;
    height: 4em;
}

div#b {
    background: red;
    width: 4em;
    height: 2em;
}

div#c {
    background: pink;
    width: 1em;
    height: 1em;
}

p{
    font-size: 80px;
    background: yellow;
    margin: 0;
    padding: 0;
}

Se ha usado una tamaño de fuente grande de forma intencionada para forzar el uso del scroll. Ahora realiza el siguiente ejercicio para que puedas comprobar por ti mismo como funciona el modelo de bloques:

Cambia el posicionamiento del bloque a a relative y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero el espacio reservado que debería haber ocupado el bloque azul, se conserva
Cambia el posicionamiento del bloque c a relative y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque rosa cambiará su posición con respecto a su contenedor (el bloque rojo)
Cambia el posicionamiento del bloque a a absolute y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero como no se ha reservado espacio para el bloque azul, el rojo se colocará en la esquina superior izquierda
Y si hacemos scroll, los bloques dejarán de ser visibles
Cambia el posicionamiento del bloque a a fixed y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero como no se ha reservado espacio para el bloque azul, el rojo se colocará en la esquina superior izquierda
Y si hacemos scroll, veremos que el bloque azul ha quedado fijo en su posición con respecto a la ventana
Cambia el posicionamiento del bloque a a float: right

El bloque azul se superpondrá al resto de elementos, se habrá colocado en el borde derecho de la pantalla y no se ha reservado espacio para ese bloque
Cambia el posicionamiento del bloque c a float: right

El bloque rosa se pegará al lado derecho de su contenedor, el bloque rojo
Cambia el posicionamiento del bloque b a float: right

El bloque rojo se pegará al lado derecho del elemento flotante anterior, el bloque azul
Cambia el posicionamiento del bloque a a float: left y añade a p la propiedad clear: right

El párrafo se colocará debajo del bloque rojo, pero se superpondrá al bloque azul
Cambia el posicionamiento de p a clear: both

El párrafo se colocará debajo del bloque azul

Modelo flexible

El posicionamiento flexible permite acomodar los elementos de la página según cambien las dimensiones y orentación de la página

Nos permite hacer un diseño adaptativo para que nuestras páginas web se visualizen correctamente en cualquier dispositivo

Este estándar es relativamente reciente y todavía no está soportado por todos los navegadores, pero en un futuro lo estará

Como ventajas se obtiene un código más legible y simple, donde podremos cambiar el orden de los elementos independientemente del orden en el código HTML

El modelo flexible es apropiado para colocar pequeños componentes de una página web

Para realizar una disposición general de los elementos de la página, se está imponiendo el modelo de rejilla

La idea principal es que un contenedor flexible expande o comprime sus elementos para rellenar el espacio libre o ajustarse al área disponible

Así tendremos un contenedor flex (flex container) y una serie de elementos flex contenidos (flex item)

Para definir un contenedor utilizaremos la propiedad display: lex (o display: kit-web.flex si queremos compatibilidad con Safari)

Todos los elementos contenidos pasarán a ser elementos flex

En este modelo no se utilizan conceptos como ordenamiento horizontal o vertical sino que se define un eje principal (main axis) y otro secundario (cross axis)

De esta forma, el diseño se ajusta fácilmente a los cambios de orientación del dispositivo

Para cada eje podemos situar los componentes en su inicio (main-start o cross-start) y final (main-end o cross-end)

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div id='cont01' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont02' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont03' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont04' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732178978&k=402a6be813102f12e661a4587b48ace6&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este html de ejemplo para poder comprobar el uso del modelo flexible, para ello usaremos como base, la siguiente hoja de estilos de ejemplo:

.contenedor {
    width: 400px;
    border-style: solid;
    border-color: #3F51B5;
    border-width: 4px;
    margin-top: 15px;
    display: flex;
}

.contenedor>div {
    background-color: #FF4081;
    color: white;
    text-align: center;
    width: 50px;
    height: 50px;
    font-size: 3em;
    margin: 4px;
}

Dirección de los elementos

La propiedad flex-direction especifica la dirección del eje principal, es decir, cómo se colocan los elementos dentro del contenedor

Admite los siguientes valores:

row fila
row-revese fila invertida
column columna
column-reverse columna invertida

Para comprobar su comportamiento, añade el siguiente CSS al ejemplo anterior:

#cont01 {
    flex-direction: row;
}

#cont02 {
    flex-direction: row-reverse;
}

#cont03 {
    flex-direction: column;
}

#cont04 {
    flex-direction: column-reverse;
}

Ajuste en el eje principal

La propiedad wrap establece si es necesario ajustar los elementos para mostarlos en una única fila (o columna)

Admite los siguientes valores:

nowrap ajusta los elementos a una línea
wrap ajusta los elementos pero sin cambiar su tamaño
wrap-reverse ajusta los elementos pero sin cambiar su tamaño, pero en el orden inverso de filas

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont05' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div id='cont06' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div id='cont07' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

Y el siguiente CSS:

#cont05 {
    flex-wrap: nowrap;
}

#cont06 {
    flex-wrap: wrap;
}

#cont07 {
    flex-wrap: wrap-reverse;
}

Alineación del contenido

Con la propiedad justify-content podemos alinear los elementos con respecto al eje principal del contenedor

Nos permite decidir qué hacer con el espacio restante

Admite los siguientes valores:

flex-start junta los elementos al principio del eje
flex-end junta los elementos al final del eje
center centra los elementos
space-between reparte el espacio entre los elementos dejando los extremos pegados al borde
space-around todo el espacio restante se reparte alrededor de cada elemento

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont08' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont09' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont010' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont011' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont012' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Y el siguiente CSS:

#cont08 {
    justify-content: flex-start;
}

#cont09 {
    justify-content: flex-end;
}

#cont10 {
    justify-content: center;
}

#cont11 {
    justify-content: space-between;
}

#cont12 {
    justify-content: space-around;
}

Ajuste en el eje secundario

Para alinear los elementos con respecto al eje secundario disponemos de la propiedad align-items

Admite los siguientes valores:

strech para ocupar todo el ancho
flex-start alinea los elementos al principio del eje
flex-end alinea los elementos al final del eje
center centra los elementos

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont013' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont14' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont015' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont016' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Y el siguiente CSS:

.contenedorAlto {
    height: 100px;
}

#cont13 {
    align-items: strech;
}

#cont14 {
    align-items: flex-start;
}

#cont15 {
    align-items: flex-end;
}

#cont16 {
    align-items: center;
}

Propiedades de los elementos

Hasta ahora hemos visto propiedades para configurar el contenedor principal

Ahora vamos a enumerar algunas propiedades muy interesantes para manipular los elementos:

order indica el orden en el que aparece el elemento dentro del contenedor
De esta forma no será necesario modificar el HTML para reordenar los elementos, ya que lo realizaremos por código
flex-grow establece el factor de crecimiento del elemento
Es decir, cómo crece en relación a los otros elementos, siempre que el contenedor tenga espacio libre
flex-shrink establece el factor de encogimiento del elemento
Es decir, cómo decrece en relación a los otros elementos, siempre que el contenedor tenga espacio libre
flex-basis indica el tamaño por defecto (ancho) antes de que el espacio libre del contenedor sea distribuido
Normalmente se deja su valor por defecto: flex-basis: auto

Existe una forma abreviada para las propiedades flex-grow, flex-shrink y flex-basis, simplemente especificando el valor que tomarán: flex: 1 1 auto

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont017' class='contenedor'>
    <div id='item1'>1</div>
    <div id='item2'>2</div>
    <div id='item3'>3</div>
    <div id='item4'>4</div>
    <div id='item5'>5</div>
</div>

Y el siguiente CSS:

#item1 {
    order: 3;
}

#item2 {
    order: 1;
    flex-grow: 2;
}

#item3 {
    order: 2;
}

#item4 {
    order: 5;
}

#item5 {
    order: 4;
}

Modelo de rejilla

Aunque el modelo de cajas flexibles permite crear sitios adaptativos gracias a los media queries, el modelo que se está imponiendo es el de rejilla

En este modelo la pantalla se divide en una rejilla virtual y el diseñador puede elegir cuántas celdas de esa rejilla ocupará cada elemento dependiendo del dispositivo

Este diseño se ha popularizado gracias a Bootstrap creada por los desarrolladores de Twitter

En Bootstrap el espacio disponible se divide en 12 columnas de igual tamaño

Para cada elemento se indicará cuántas columnas ocupará dependiendo del tamaño del dispositivo

Por ejemplo, para una barra lateral podemos indicar que ocupe 2 columnas en un escritorio, 6 columnas (la mitad del ancho total) para tablets y 12 columnas (todo el ancho) en los dispositivos móviles

Para conseguirlo se usará un conjunto de clases, en este ejemplo serían: .col-md-2, .col-sm-6 y .col-xs-12

Los tamaños se definen en Bootstrap cómo:

xs (extra small)
Pantallas con ancho inferior a 768px
La gran mayoría de teléfonos inteligentes
sm (small)
Pantallas con ancho inferior a 992px
Si se ha definido la clase xs y el tamaño inferior a 768px, entonces se aplicará esa clase
md (medium)
Pantallas entre 992px y 1200px
Este rango representa la mayoría de los navegadores de escritorio
lg (large)
Pantallas muy grandes con ancho superior a 1200px
Normalmente son grandes pantallas de alta definición

<div class='col-xs-12 col-sm-6 col-md-8'>
    12 cols smartphone, 6 tablet, 8 PC
</div>
<div class='col-xs-6 col-md-4'>
    6 cols smartphone (y tablet), 4 PC
</div>

Como puede verse en el ejemplo, el contenido se organiza en filas (clase row) y dentro de estas filas crearemos las columnas con los tamaños deseados

Media Queries

Una media query permite utilizar las reglas de las hojas de estilo dependiendo de las caracteristicas del medio (ancho, alto y color)

Fueron añadidas a partir de CSS3, permiten que la presentación del contenido se adapte a un rasngo específico de dispositivos de salida sin tener que cambiar los contenidos y son la base del diseño adaptativo

Pueden utilizarse de dos formas: importando una hoja de estilo o aplicandolas dentro de una misma hoja de estilo

Importación de hojas de estilo

Podemos utilizar las media queries para elegir distintas CSS dependiendo del medio o las características del mismo

Actualmente sólo existen dos medios admitidos:

screen un navegador
print una impresora

<link rel='stylesheet' media='screen' href='browser.css'>
<link rel='stylesheet' media='print' href='printer.css'>
<link rel='stylesheet' media='(max-width: 800px)' href='tablet.css'>

Como puede observarse en el ejemplo, definir el tipo de medio es tan sencillo como añadir el atributo media dentro del elemento link

También es posible indicar condiciones sobre el tipo de medio, en el ejemplo le hemos dicho que se se cargue cuando el medio tenga una anchura inferior a 800px, para poder usarla con tablets

Reglas @media

Las reglas @media nos permiten indicar sobre qué tipo de medio deben aplicarse ciertas reglas CSS

Su sintasix genérica es:

@media [mediatype and] (media feature) {
   CSS-Code;
}

Los únicos mediatype admitidos son screen y print, como hemos visto anteriormente

@media (min-width: 700px) { ... }

@media (min-width: 700px) and (orientation: landscape) { ... }

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Como puede verse en el ejemplo, las media feature nos permiten indicar características del dispositivo y se pueden añadir condiciones utilizando los operadores lógicos and, not y only

Podemos utilizando los media feature especificar el tamaño del dispositivo, su orentación o resolución, número de colores, etc

Algunos de los más destacados son:

aspect-ratio ancho/alto del dispositivo
min-aspect-ratio mínimo ancho/alto del dispositivo
max-aspect-ratio máximo ancho/alto del dispositivo
color-index número de colores que el dispositivo puede mostrar
width ancho exacto
min-width ancho mínimo
max-width ancho máximo
height alto exacto disponible
min-height alto mínimo disponible
max-height alto máximo disponible
orientation orientación, admite los valores:
- landscape
- portrait

Diseño adaptativo con Media Queries

Vamos a ver dos ejemplos con media queries para entender cómo hacer nuestros propios diseños adaptativos, uno con el modelo flexible y otro con el modelo de rejilla

Diseño adaptativo con el modelo flexible

En siguiente ejemplo veremos que crear un diseño adaptativo con el modelo flexible es muy fácil

Ya que podemos aprovecharnos de la posibilidad de reordenar los elementos que nos ofrece esta opción

Vamos a partir de una disposición de 3 columnas con la barra de navegación, el contenido principal y una barra lateral

Cuando el tamaño del navegador sea menor que 640px pasaremos a una única columna

El código HTML que usaremos en el ejemplo es el siguiente:

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
        <link rel='stylesheet' type='text/css' href='flexible.css'>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <header>Esta es la cabecera</header>
       <div id='principal'>
           <article>Contenido</article>
           <aside>Barra lateral</aside>
           <nav>Barra de navegación</nav>
       </div>
       <footer>Este es el pie de la página</footer>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732178978&k=402a6be813102f12e661a4587b48ace6&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

El código CSS del archivo flexible.css que usaremos en el ejemplo es el siguiente:

header {
    height: 10%;
    background-color: lightblue;
}

#principal {
    display: flex;
    flex-flow: row;
    align-items: stretch;
    min-height: 80%;
}

nav {
    background-color: lightgray;
    flex: 1 6 20%;
    order: 1;
}

article {
    background-color: lemonchiffon;
    flex: 3 1 60%;
    order: 2;
}

aside {
    background-color: ligthsalmon;
    flex: 1 6 20%;
    order: 3;
}

footer {
    background-color: ligthgreen;
    height: 5%;
}

@media all and (max-height: 640px) {
    #principal {
       flex-flow: column;
    }

    article {
       order: 1;
    }

    aside {
       order: 2;
    }

    nav {
       order: 3;
    }
}

Diseño adaptativo con el modelo de rejilla

En siguiente ejemplo veremos que crear un diseño adaptativo con el modelo de rejilla es muy fácil

Una de las principales limitaciones es que ya no que podemos reordenar los elementos

Vamos a usar una rejilla de tipo Bootstrap

Para ello vamos a utilizar las clases cols-xs-12 para indicar que en tamaño pequeño el elemento ocupará 12 columnas, col-sm-8 ocupará 8 columnas para un tamaño pequeño y col-sm-2 ocupará 2 columnas para un tamaño un poco más grande

Para el cambio de tamaño pequeño a grande se ha asignado 768px

El código HTML que usaremos en el ejemplo es el siguiente:

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
        <link rel='stylesheet' type='text/css' href='rejilla.css'>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div class='row'>
           <header class='col-xs-12 col-sm-12'>Esta es la cabecera</header>
       </div>
       <div class='row' id='principal'>
           <nav class='col-xs-12 col-sm-2'>Barra de navegación</nav>
           <article class='col-xs-12 col-sm-8'>Contenido</article>
           <aside class='col-xs-12 col-sm-2'>Barra lateral</aside>
       </div>
       <div class='row'>       
           <footer class='col-xs-12 col-sm-12'>Este es el pie de la página</footer>
       </div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732178978&k=402a6be813102f12e661a4587b48ace6&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

El código CSS del archivo rejilla.css que usaremos en el ejemplo es el siguiente:

header {
    height: 10%;
    background-color: lightblue;
}

#principal {
    min-height: 80%;
}

nav {
    background-color: lightgray;
    height: 20%;
}

article {
    background-color: lemonchiffon;
    minheight: 80%;
}

aside {
    background-color: ligthsalmon;
    height: 20%;
}

footer {
    background-color: ligthgreen;
    height: 5%;
}

.row: after{
    clear: both;
}

.col-xs-12 {
    float: left;
    width: 100;
}

@media all and (max-height: 768px) {
    .col-sm-2, .col-sm-18, .col-sm-12 {
       float: left;
    }

    .col-sm-12 {
       width: 100%;
    }

    .col-sm-8 {
       width: 66.6667%;
    }

    nav, aside {
       height: 80%;
    }
}

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Posicionamiento de elementos

Posicionamiento de elementos

Modelo de bloque

Modelo flexible

Dirección de los elementos

Ajuste en el eje principal

Alineación del contenido

Ajuste en el eje secundario

Propiedades de los elementos

Modelo de rejilla

Media Queries

Importación de hojas de estilo

Reglas @media

Diseño adaptativo con Media Queries

Diseño adaptativo con el modelo flexible

Diseño adaptativo con el modelo de rejilla

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Posicionamiento de elementos

Modelo de bloque

Modelo flexible

Dirección de los elementos

Ajuste en el eje principal

Alineación del contenido

Ajuste en el eje secundario

Propiedades de los elementos

Modelo de rejilla

Media Queries

Importación de hojas de estilo

Reglas @media

Diseño adaptativo con Media Queries

Diseño adaptativo con el modelo flexible

Diseño adaptativo con el modelo de rejilla

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies