Responsive Web Design 1 – Unidades Medida

Diseño Web 23 mayo 2017

RWD Unidades de Medida

Este va a ser el primero de dos post en los que voy a hablar de Responsive Web Design. En este primero vamos a hablar de las Unidades de Medida que podemos encontrar, qué significan y cómo utilizarlas en nuestras páginas web.

Pero para empezar una definición de Responsive Web Design:

Es la técnica que se utiliza en las páginas webs. La página web se va a ir a adaptando al tamaño de la pantalla del dispositivo con el que estemos viendo la web. Se va a ir ajustando al tamaño del ordenador, Tablet o Smartphone. El Responsive Web Design, también podemos verlo como RWD o diseño adaptativo o responsivo en castellano.

Unidades de Medida

Las unidades de medida se pueden hacer muchas divisiones, pero vamos ver dos grandes divisiones y finalmente otras dos opciones. Etas dos últimas opciones son las que más utilizo, por eso una división especial.

Medidas con Tipografías

Todas estas medidas que vamos a ver en este apartado son las que tienen como referencia a la tipografía. El tamaño lo van a tener en cuenta a partir de ellas.

EM

Esta medida tiene como referencia el tamaño de la letra que se está empleando por defecto en nuestra página. El tamaño de va a tomar como referencia el ancho de la letra M.

EJ: font-size:2em; esta va a ser el doble del tamaño. Si la letra de referencia eran 16px, esta tendría 32px;

EX

Funciona exactamente igual que la anterior. Pero la única diferencia es que se coge de referencia el ancho de la letra x.

REM

Esta forma de hacerlo también funciona similar al em. Pero a diferencia del anterior, REM no va a coger el tamaño de su elemento padre, sino que lo va a coger de la raíz, va a coger el tamaño que se haya creado en el html.

Lo bueno de esta forma es que todos los elementos de la web se van a regir por la misma medida. Y se podrá tener todo más controlado.

Medidas con Viewport

Estas medidas van a tener en cuenta el tamaño de la ventana. Todo se va a tomar de referencia con el tamaño de pantalla en el que nos encontremos.

Vw

Hace referencia a la anchura de la pantalla o viewport.

EJ→ width: 100vh;

Vh

Hace referencia a la altura de la pantalla o viewport.

EJ→ height: 100vh;

Vmin

Cuando tenemos los dos valores anteriores se toma el que tenga menor valor.

Vmax

Cuando tenemos los dos valores anteriores se toma el que tenga mayor valor.

Píxeles

Son los puntitos de que componen la pantalla. Es posiblemente la medida más básica que nos vamos a poder encontrar en una pantalla web.

Los píxeles se utilizan mucho para poder establecer los anchos de pantallas de cada dispositivo, por ejemplo, establecer que 480px es el ancho de una pantalla móvil.

Estos píxeles se identifican con px, y lo vamos a encontrar en cualquier elemento de nuestra web, ya que es una medida que establece un tamaño exacto.

EJ → img {width: 150px}

Es posiblemente la medida que más se llega a utilizar en una web.

PORCENTAJES

El mundo del Responsive llegó para quedarse, y los porcentajes llegaron con ellos. Es una nueva forma de empezar a trabajar con las estructuras de la web, ya que puede ser más cómodo poder trabajar de esta forma. Ya que es más fácil saber el porcentaje de pantalla que vamos a utilizar.

Los porcentajes se utilizan para ocupar un espacio en la pantalla, y se aplica a toda clase de etiquetas como párrafos, imágenes, headlines… es algo que nos ayuda mucho.

EJ → p {width: 95%}

CONCLUSIONES

Con estas unidades espero que te hayas podido hacer una pequeña idea de cómo se mide una web. Como se pueden utilizar estas medidas para luego aplicarlos en nuestra web.

En un siguiente artículo se profundizará más en el responsive web design con algo muy importante como los media queries.

Datos del artículo
Responsive Web Design 1 - Unidades Medida
Título
Responsive Web Design 1 - Unidades Medida
Descripción Breve
En este artículo encontraremos toda la información relevante a las unidades de medida que afectan para el Responsive Web Design RWD, siendo el primero de dos artículos sobre este tema.
Autor
Publicado en:
aexpositogonzalez.com
Logotipo:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *