Tema 7 Flashcards
¿Qué problemas representa crear múltiples sitios web para distintos dispositivos?
– Dificultad de mantenimiento.
– Inconsistencia del contenido.
¿Qué es RWD (Responsive Web Design)?
El Responsive Web Design (RWD) consiste en adaptar el contenido y la estructura
de una página web al dispositivo.
El diseño responsive está basado en tres
técnicas:
– Un diseño flexible basado en retículas
– Imágenes y medios flexibles
– Media queries
Para convertir las medidas fijas (en píxeles) a relativas (en porcentajes) hay que aplicar esta fórmula:
𝑎𝑛𝑐h𝑜 𝑒𝑛 % = (𝑚𝑒𝑑𝑖𝑑𝑎 𝑜𝑏𝑗𝑒𝑡𝑖𝑣𝑜 𝑒𝑛 𝑝𝑥 / 𝑚𝑒𝑑𝑖𝑑𝑎 𝑐𝑜𝑛𝑡𝑒𝑥𝑡𝑜 𝑒𝑛 𝑝𝑥) × 100
¿Qué son media queries?
Las media queries son un mecanismo de CSS que permite aplicar distintos
estilos según las características del dispositivo
¿Qué es viewport?
El viewport es el espacio que dejan los navegadores para renderizar el contenido.
– Sería el área útil dónde se muestra la página web.
¿Qué es un pixel de referencia?
Un pixel definido en CSS no tiene porqué ser del mismo
tamaño que el pixel del dispositivo.
– Al pixel definido en CSS se le llama pixel de referencia.
La etiqueta meta de viewport típica para una página con responsive design sería:
¿Qué es una media query?
Una media query está formada por un media type (una regla @media o un atributo media en la etiqueta link) y 0 o más expresiones para detectar las características del dispositivo.
¿Qué son los puntos de ruptura?
► Los puntos de ruptura se pueden establecer cuando se observa alguna tensión en la
presentación.
► Para el responsive design, se suelen establecer a partir de la anchura estándar (aproximadamente) de los dispositivos.
¿Qué es un framework CSS?
Un framework css es un conjunto de herramientas (hojas de estilo, scripts, etc.) y prácticas que facilitan las tareas repetitivas para trabajar con css.
► Aporta una serie de scripts y hojas de estilo que se aplican en forma de clases al código html.
Desventajas de un framework CSS
– Homogeneiza la presentación, haciendo que todos los sitios web tengan un aspecto similar.
– Obliga a utilizar la semántica propia del framework.
– Añade código, muchas veces no utilizado, en nuestro sitio web.
¿Qué es la retícula?
Es una herramienta que se utiliza en el diseño editorial para dar consistencia a una publicación.
Utilizando media queries, ¿cómo se puede establecer una hoja de estilo o unas reglas de estilo para dispositivos con un ancho de pantalla máximo de 480 píxeles?
A.
B. @import url(estilos.css) max-width=480px
C. @media max-width=480px {…}
Si se está haciendo un diseño basado en retícula flexible y tenemos un bloque de 150px de ancho en un contenedor de 600px. ¿Qué valor debería tomar la propiedad width de ese bloque?
25%
