diseño liquido fluido responsive

Diseño líquido (fluido) CSS frente a responsive design.

APRENDERAPROGRAMAR.COM

DISEÑO LÍQUIDO CSS
(FLUIDO) FRENTE A
RESPONSIVE-DESIGN.
MAX-WIDTH, MIN-WIDTH,
MAX-HEIGHT, MINHEIGHT (CU01053D)

Sección: Cursos
Categoría: Tutorial básico del programador web: CSS desde cero
Fecha revisión: 2029
Resumen: Entrega nº53 del Tutorial básico: “CSS desde cero”.

Autor: César Krall
©aprenderaprogramar.com, 2006-2029

Diseño líquido (fluido) CSS frente a respo
S
onsive design.

DISEÑO LÍQUIDO FRENTE A RESPO
ONSIVE DESIGN
uge
eso
net
s
nes, smartTV etc. ha surgido el
Vs,
Con el au del acce a intern a través de tablets, smartphon
problema de que las páginas web deben mostrarse en pantallas de muy diferen tamaño. Conseguir
a
b
p
nte
que la misma página web se vebien en d
a
ea
dispositivos muy distintos es algo q no es sencillo de
que
s
resolver.

mera aproxim
mación o intento de res
solver este problema es el denomin
p
s
nado diseño líquido o
o
Una prim
fluido. Se dice que u página w tiene d
e
una
web
diseño líquid cuando la anchura de sus eleme
do
a
entos está
definida u
utilizando po
orcentajes. S
Supongamos que tenemo una cabecos
cera cuyo an
ncho fijamos en el 100
s
%, una co
olumna later cuyo anch fijamos en el 25 % y una parte pr
ral
ho
rincipal de c
contenidos cuyo ancho
fijamos e el 75%. E resultado será que al visualizarse en distintos dispositiv la anchu de los
en
El
e
vos
ura
elemento será un po
os
orcentaje de la anchura d
disponible. Ve
eamos algun ejemplos
nos
s:

Dispositivo
DDimension
nes
pantalla en p
p
pixeles

Ancho que tomará la
columna latera (25 %)
al

A
Ancho que to
omará la
p
parte princip (75%)
pal

Un TV Full HD
n

1.920 x 108 px
80

480 px
x

1440 px
p

Un ord
denador por
rtátil

1280 x 800 px
0

320 px
x

960 px
p

Tablet Sa
amsung Gala Tab
axy

800 x 1280 px
0

200 px
x

600 px
p

iPhone

640 x 960160 px
x

480 px
p

mos
tablecemos un ancho “f
fijo” para nuestra págin web de 9 px y qu para el
na
900
ue
Supongam que est
contenedor que conf
forma la columna latera definimos #columnaL
al
s
Lateral {widh 225px; } y para el
ht:
cio
#espacioCent {width: 6
tral
675px;}. Con estas regla decimos
n
as
contenedor del espac principal definimos #
que el dis
seño no es flluido porque no se adap
e
ptarán al anc disponible de pantalla. En la TV Full HD de
cho
nuestro e
ejemplo el an
ncho disponible es de 1920 px, mient que el ancho total q ocuparem con la
tras
que
mos
definición indicada es de 900 px Esto supon que 1920 – 920 = 10
n
s
x.
ne
0
000px de la pantalla de televisor
el
quedará libre, con lo que la sensa
ación será qu la página web se ve mpequeña y se desaprovecha la
ue
muy
a
pantalla.
ntrario, si consideramos el iPhone de ejemplo, su ancho disp
el
s
ponible es de 640 px mie
e
entras que
Por el con
nuestra p
página web t
tiene 900 px de ancho. Como la pá
ágina web n cabe en la pantalla, aparecerá
no
cortada y para poder ver las parte no visibles aparecerán unas barras de scroll. La sensación será que la
es
s
sa
s
página we se ve muy grande y co
eb
y
ortada.
Pasamos ahora al dise fluido. P
eño
Para ello def
finiríamos las anchuras e porcentajes. Fíjate qu siempre
s
en
ue
hablamos de anchura porque se entiende qu las página web en ve
s
as
ue
as
ertical son m largas y el usuario
muy

© aprender
raprogramar.co 2006-2029
om,

Diseño líquido (fluido) CSS frente a responsive design.ya está acostumbrado a tener que subir y bajar por ellas. En cambio, tener que moverse lateralmente
es algo que suele considerarse “desagradable”. En el diseño fluido definiríamos los anchos de esta
manera: para la columna lateral #columnaLateral {widht: 25%; } y para el contenedor del espacio
principal #espacioCentral {width: 75%;}.
Parece una solución ideal. Ahora el tamaño de la página...