Cursos Online Gratis

Dándole tamaño a nuestras capas o contenedores con HTML5 y CSS3

Una vez que hemos creado y posicionado nuestras capas, lo siguiente será darles tamaño, para ello emplearemos las propiedades width y height (ancho y alto) de CSS3 y tenemos distintas opciones:

Medidas absolutas: en este tipo de posicionamiento le daremos la medida del ancho y/o del largo. En caso de darle una sola medida, adaptará la otra al contenido, y si no le damos ninguna, la capa medirá lo que ocupe su contenido. Las medidas podemos dárselas en pixels (px) o puntos de pantalla (pp):

.ejemplo {
   width: 35px;
   height:50px;
}

La capa llamada "ejemplo" medirá 35 pixels de ancho y 50 de alto.

Medidas relativas: con este tipo posicionamiento estableceremos porcentajes que ocuparán las capas u otros elementos en función al elemento padre. Veamos un ejemplo explicado:

.ejemplo {
   width: 50%;
   height: 30%;
}
.ejemplo2 {
   width: 30%;
}

<div class="ejemplo">
   <div class="ejemplo2"></div>
</div>

En este caso, la capa ejemplo de nuestra web medirá el 50 por ciento de ancho de la pantalla del dispositivo, y el 30 por ciento de alto de la misma, mientras que la capa ejemplo2 medirá el 30 por ciento de ancho de la capa ejemplo, y adaptará el alto al contenido.

Si suponemos que el ancho de la pantalla del dispositivo fuesen 1800 pixels, la capa ejemplo medirá 900 pixels de ancho (el 50 por ciento de 1800), mientras que la capa ejemplo2 medirá 270 pixels de ancho (un 30 por ciento de 900).

Medidas vh y vw: con este tipo de medidas conseguiremos dar un tamaño relativo a nuestras capas en función del tamaño de pantalla, heredando siempre del mismo. Estas medidas van del 1 al 100, siendo 1 el uno por ciento de la pantalla, y 100 el total de la misma. Si queremos que una capa mida toda la pantalla:

.total {
   width: 100vw;
   height: 100vh;
}

Si en nuestro ejemplo anterior en lugar de utilizar los porcentajes para la capa "ejemplo2" utilizásemos width: 30vw; ésta capa mediría un 30 por ciento de la pantalla.

Medidas máximas y mínimas: podemos establecer límites a la anchura y altura de la capa con los atributos min-width max-width min-height max-height. Estos atributos conseguirán que una capa mida como máximo o mínimo lo establecido, pudiendo re-dimensionarse y medir más o menos en función del contenido y resolución o tamaño de la pantalla del dispositivo que la muestre. Suelen ir acompañadas de width y height, debido a que si no, la capa tomará la medida establecida por min-width, no re-dimensionándose.

.ejemplo {
   width: 100%;
   min-width: 1200px;
}

En este caso nuestra capa ejemplo ocupará el ancho total de la pantalla siempre que sea superior a 1200 pixels, en caso de ser inferior a 1200 pixels, aparecerán las barras de scroll debido a que la capa ocupará más que la pantalla del dispositivo que la muestra.

SI QUIERES VER EJEMPLOS DE TAMAÑO EN CAPAS EN HTML5 Y CSS3, Y ESTE TEMA DESARROLLADO, HAZ CLIC AQUÍ


Volver al índiceIr arriba

DESCARGAR

Libro de programación en C