Índice
Hola, en esta ocasión te hablaré sobre el diseño web responsivo y algunos de sus conceptos generales, sobre como implementar un diseño web que sea adaptable a la pantalla de cualquier dispositivo.
Crear un sitio web responsivo puede ser un dolor de cabeza al principio, pero una vez que comprendas los fundamentos básicos, estarás listo para avanzar.
¿Qué es un sitio web responsivo?
Los sitios web responsivos permiten que los sitios y las páginas web se muestren en todos los dispositivos y tamaños de pantalla adaptándose automáticamente a la pantalla, ya sea una computadora de escritorio, laptop, tablet o un smartphone. Esto se logra trabajando con CSS usando varias configuraciones para brindar la mejor experiencia visual al usuario. Para comprender mejor esto, te mencionaré los conceptos básicos como Media Queries y Unidades CSS para que puedas aplicarlo a tu diseño web.
Media Queries
Las Media Queries son condiciones que aplica CSS. Le dice al navegador que agregue o elimine determinadas reglas CSS según las características específicas del dispositivo. A medida que cambia el tamaño de la pantalla, necesitamos reorganizar nuestro diseño web. Normalmente, se estructuraría verticalmente a medida que disminuye el tamaño de la pantalla.
La sintaxis de las Media Queries es la siguiente:
@media <tipo-media> and (expresion){
/* CSS aplicado si la condición se cumple*/
}
- @media le dice al navegador que estamos iniciando una consulta de medios.
- tipo-media describe el tipo de reglas de dispositivo al que las aplicaremos (es opcional). Por ejemplo: podemos colocar «screen», «print» e incluso «all», para más información visita esta página.
- (expresión) puede ser el width o la orientación del dispositivo
- Entre las llaves se especifican las reglas CSS que deben aplicarse cuando se cumpla la «expresión»
A continuación te muestro un ejemplo de la vida real de Media Query:
@media (max-width: 400px) {
.proyecto, .contenedor, .img {
width: 80%;
padding-right: 20%;
}
}
En este ejemplo no se usa el <tipo-media> opcional, se indica la condición max-width 400px (el punto de quiebre) que le dice al navegador que las reglas dentro de esta Media Query deben limitarse a los dispositivos que tengan un ancho de pantalla máximo de 400px. Dentro de las llaves tenemos el código CSS que se aplicaría, en este caso afectaría a las clases: «proyecto», «contenedor» e «img».
Unidades CSS
Las Unidades CSS determinan el tamaño de una propiedad que estás configurando para un elemento determinado o su contenido.
por ejemplo:
font-size: 12px;
El tamaño de fuente es la propiedad y 12px es el valor de la propiedad. El pixel (px) es una unidad de css.
Las unidades se pueden clasificar en Absolutas y Relativas:
| UNIDADES ABSOLUTAS | UNIDADES RELATIVAS |
|---|---|
| Valores fijos No se escalan cuando cambia el tamaño de la pantalla. | Valores escalados Escalan en relación a otra cosa. |
| cm – centimeters mm – millimeters in – inches (1in = 96px = 2.54cm) px – pixels (1px = 1/96th of 1in) pt -points (1pt = 1/72 of 1in) pc – picas (1pc = 12 pt) | em – Relativo al tamaño de la fuente del elemento. ex – Relativo a la altura x de la fuente actual (rara vez se usa) rem – Relativo al font-size del elemento raíz vw , vh – Relativo al viewport (pantalla) 100vw = 100% ancho de la pantalla % – Relativo a su padre |
Las unidades relativas son las que nos ayudarán a construir sitios web responsivos.
Relativo a sus padres (%):
div.padre {
background-color: red;
width: 100%
}
div.hijo {
background-color: blue;
width: 50%
}
En el ejemplo, dentro del div padre tenemos un div hijo. El hijo tendrá el 50% el ancho del padre.
Viewport / Ventana gráfica (vw, vh)
- La ventana gráfica o viewport es el área visible del usuario. Ya sea una computadora, tablet, smartphone. vw representa el ancho de la ventana gráfica y vh representa el alto. Por ejemplo 100vw representa el 100% de la anchura, y 50vh representa el 50% de la altura.
Tamaño de fuente (em, rem)
- em: Son relativas al tamaño de la fuente del padre (X veces el padre).
Por ejemplo: 1em es igual al tamaño de la fuente del padre y 2em es 2 veces el tamaño de la fuente del padre.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Em</title>
</head>
<body>
<div class="padre">
<div class="hijo1">Hijo 1</div>
<div class="hijo2">Hijo 1</div>
</div>
<style>
.padre {
font-size: 10px;
}
.hijo1 {
font-size: 2em;
}
.hijo2 {
font-size: 4em;
}
</style>
</body>
</html>
En este ejemplo el div «padre» tiene un tamaño de fuente de 10px, div «hijo1» tiene un tamaño de fuente de 2em, es decir 2 veces el tamaño de fuente del padre, en este caso 20px, div «hijo2» tiene un tamaño de fuente de 4em (4 veces el tamaño de fuente del padre).
- rem – Son relativas al tamaño de fuente de la raíz html, si el tamaño de fuente no está definido en html, será igual al predeterminado: 16px.
html{
font-size: 20px;
}
.clase1{
font-size: 2rem;
}
.clase2{
font-size: 3rem;
}
En este ejemplo la fuente raíz tiene un tamaño de 20px, los elementos con la clase1 tendrán un tamaño de fuente de 2 veces el tamaño de la fuente raíz, es decir 40px, los elementos de la clase2 tendrán un tamaño de fuente de 60px.
Es recomendable aplicar las unidades relativas a nuestros diseños web para hacerlos responsivos, puedes ir y cambiar los valores por unidades relativas donde sea necesario.
Si quieres aprender más sobre el diseño responsivo puedes entrar a la siguiente página: