Diferencia entre revisiones de «Usuario:ManuelRomero/preferencias/flexlayout»
De WikiEducator
(→Felxbox) |
|||
Línea 16: | Línea 16: | ||
Iceberg web | Iceberg web | ||
− | === | + | ===Flexbox=== |
*https://escss.blogspot.com.es/2012/11/flexbox-nuevo.html<br /> | *https://escss.blogspot.com.es/2012/11/flexbox-nuevo.html<br /> | ||
#Felxibilidad Adaptación de los '''''felx items''''' '''(hijos)''' a los '''''flex container''''' (Tamaño, contenido, espacio ...) | #Felxibilidad Adaptación de los '''''felx items''''' '''(hijos)''' a los '''''flex container''''' (Tamaño, contenido, espacio ...) |
Revisión de 22:32 23 dic 2017
Conceptos en el diseño web
Adjetivos encontrados en el diseño web
- Felxible
- Líquido
- Porcentual
- Adaptable
...
Resposive Web Design o RWD
Para lograr estos fines, el RWD propone y aboga por:
- El uso de las reglas Css @media queries para adaptar el layout a la ventana o viewport.
- La caja flexible o flexbox a la espera de que el CSS Grid Layout sea una opción real.
- Usar recursos gráficos (img, video, canvas...) sensibles al medio o responsive images [1] / responsive images [2]. No sólo en tamaños (px) sino en su resolución (2x...) y/o hasta seleccionar la imagen que se sirve (nuevos elementos como picture, atributos srcset... bases de selección, étc [ver 1])
- Usa "Javascript discreto" o no invasivo (Unobtrusive JavaScript).
- Trabajar con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.
Iceberg web
Flexbox
- Felxibilidad Adaptación de los felx items (hijos) a los flex container (Tamaño, contenido, espacio ...)
- Flex container : Caja contenedora de los flex items (hijos)
- Flex items
- Axis o ejes
https://escss.blogspot.com.es/2014/01/responsive-adaptive-web-design.html