<div id=”wrapper”> <header> </header> </div> #wrapper { width: 960px; } header { width: 940px; }
Si se desea transformar a dimensiones de porcentajes, se debe proceder de la siguiente manera: ✔
Para el contenedor (wrapper) buscar un valor en porcentaje lo más próximo a la dimensión fija, en este caso supongamos 96%.
✔
Para el encabezado (header) y todas las secciones contenidas dentro de wrapper, se debe utilizar la fórmula mencionada anteriormente, obteniéndose:
Resultado = Ancho de header ÷ ancho de wrapper = 940 ÷ 960 = 97.9166667
Los estilos quedarían de la siguiente manera: #wrapper { width: 96%; /*Porcentaje más aproximado*/ } header { width: 97.9166667%; /* 940 ÷ 960 */ }
Para el tamaño de las fuentes se debe realizar la misma operación, considerando que todos los navegadores modernos adoptan 16px como el tamaño de fuente por defecto, además de la recomendación de utilizar como unidad de medida “em” (se refiere a la letra “M” y se toma como parámetro para las fuentes ya que es la más ancha de todas las letras), se procede de la siguiente manera: Contexto = font-size: 100%; = font-size: 16px; = font-size: 1em;
Por ejemplo se desea transformar siguiente tamaño de fuente:
el
font-size: 48px;
El resultado sería: font-size: 3em; /* 48 ÷ 16 = 3*/
2. Flexible images & media Hace referencia a que tanto las imágenes como aquellos elemento multimedia se puedan acomodar a los diversos contenidos, por lo que se ha identificado la siguiente propiedad CSS mediante la cual se previene que en algún momento puedan ser más grandes que sus contenedores: img, embed, object, video { max-width: 100%; }
3. Media queries Permiten determinar si ciertas expresiones son ciertas en relación al navegador, si lo son, se puede cargar un bloque específico de estilos. La estructura de una media query tiene cuatro componentes básicos (Kadlec, 2013): @media [not|only] type [and] (expr) { rules }
Media types Especifíca el tipo de dispositivo, pudiendo ser: ✔
all: Todos los medios definidos.
✔
braille: Dispositivos táctiles emplean el sistema Braille.
✔
embosed: Impresoras Braille
✔
handheld: Dispositivos como móviles y PDA
✔
print: Impresoras y navegadores en el modo "Vista Previa para Imprimir".
de
que
mano