4.1 Valores porcentuales
Los valores porcentuales y las unidades relativas en CSS juegan un papel importante en la creación de diseños flexibles y responsivos. Permiten que los elementos se adapten a diferentes tamaños de pantalla y condiciones cambiantes, asegurando una mejor compatibilidad y facilidad de uso.
Los valores porcentuales se usan para establecer el tamaño de los elementos en relación al tamaño de sus elementos padres. Esto hace que el diseño sea más flexible y adaptable.
Ejemplo de uso de %:
.container {
width: 80%;
margin: 0 auto;
background-color: #f4f4f4;
}
.box {
width: 50%;
padding-top: 25%; /* Relación de aspecto 1:2 */
background-color: #3498db;
color: white;
text-align: center;
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 50%; /* Relación de aspecto 2:1 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="min-height: 200px;">
<div class="container">
<div class="box">Contenido</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Contenido</div>
</div>
</body>
</html>
Explicación del código:
.container: establece el ancho del contenedor al 80% del ancho del elemento padre, centrando conmargin: 0 auto.box: establece el ancho del bloque al 50% del ancho del contenedor. La altura del bloque se determina conpadding-top, lo que asegura una relación de aspecto 1:2
4.2 Unidades relativas (em y rem)
La unidad em es una unidad relativa que depende del tamaño de fuente del elemento padre. Si cambia el tamaño de la fuente del padre, los valores em también cambian.
Ejemplo de uso de em:
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 16px = 16px */
}
La unidad rem es una unidad relativa que depende del tamaño de fuente del elemento raíz (html). No depende de los elementos padres, lo que la hace más predecible y conveniente para crear diseños escalables.
Ejemplo de uso de rem:
<div class="container">
Algo de texto dentro del contenedor
<div class="box">
Algo de texto dentro de la caja
</div>
</div>
html {
font-size: 16px;
}
.container {
font-size: 1rem; /* 16px */
padding: 2rem; /* 32px */
}
.box {
font-size: 1.5rem; /* 24px */
margin: 1rem; /* 16px */
}
Comparación entre em y rem:
em: depende del tamaño de fuente del elemento padre, lo que puede llevar a un efecto cascada en la anidaciónrem: depende del tamaño de fuente del elemento raíz (html), lo que la hace más predecible y fácil de usar
4.3 Uso combinado de %
Usar unidades relativas (em y rem) en combinación con porcentajes permite crear diseños flexibles y adaptativos que se muestran correctamente en cualquier dispositivo.
Ejemplo: Uso combinado de %
Crearemos un diseño donde los tamaños de los elementos se determinan usando porcentajes y unidades relativas.
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.sidebar {
flex: 1 1 30%;
background-color: #f4f4f4;
padding: 1rem;
}
.main {
flex: 1 1 70%;
background-color: #e4e4e4;
padding: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso combinado de % y unidades relativas</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">Encabezado</div>
<div class="content">
<div class="sidebar">Barra lateral</div>
<div class="main">Contenido principal</div>
</div>
<div class="footer">Pie de página</div>
</div>
</body>
</html>
Explicación del código:
html: establece el tamaño de fuente base para todo el documento.container: usa porcentajes para establecer el ancho del contenedor y centrarlo en la página.headery.footer: usanrempara el padding, haciéndolos predecibles.content: usa Flexbox para disponer la barra lateral y el contenido principal con un espacio entre ellos.sidebary.main: usan porcentajes para establecer el ancho de las columnas yrempara el padding
GO TO FULL VERSION