Introducción a responsive design. Cómo adaptar tu web a móviles y tablets
1. Responsive design
Congreso web Zaragoza 2013
Miguel Monreal
Web Development & Mobile Manager
Twitter: @monrealista
MindYourGroup.com
viernes, 12 de julio de 13
3. A flexible grid (with flexible images) that incorporate
media queries to create a responsive,adaptive layout.
Ethan Marcotte
Responsive web design is
viernes, 12 de julio de 13
7. .container
Se le suele poner un max-width alto o un
width porcentual.
.container {
max-width: 1300px;
}
.container {
width: 90%;
}
viernes, 12 de julio de 13
8. target / context = result
Fórmula
target width size parent width size
viernes, 12 de julio de 13
17. When setting flexible margins on an element,
your context is the width of the element’s container.
Ethan Marcotte (Responsive Web Design, 35)
Conversión Márgenes
viernes, 12 de julio de 13
22. When setting flexible padding on an element,
your context is the width of the element itself.
Ethan Marcotte (Responsive Web Design, 35)
Conversión Padding
viernes, 12 de julio de 13
25. .main {
padding:20px;
width: 62.765957%;
/* 590px/940px */
}
target / context = result
20 / 590 = .03389830
Padding
padding main tamaño propio
.main {
width: 62.765957%; /* 590px/940px */
padding: 3.389830%; /* 20px/590px */
}
viernes, 12 de julio de 13
26. Flex your fonts!
No olvidemos convertir la fuentes de PX a EM
viernes, 12 de julio de 13
27. html {
font-size: 16px; /* base */
}
body {
font-family: Georgia, serif;
font-size: 62.5%; /* 1em = 10px */
}
Un pequeño truco
viernes, 12 de julio de 13
28. target / context = result
La fórmula!
10px / 16px = 0.625 -> 62,5%
target font size font size of containing element
viernes, 12 de julio de 13
35. Media Queries
@media screen and (max-width: 320px) {
body {
font-size: 100%;
}
}
<= 320 px
viernes, 12 de julio de 13
36. @media screen and (min-width: 1024px) {
body {
font-size: 100%
}
}
>= 1024 px
Media Queries
viernes, 12 de julio de 13
37. Advanced Media Queries
Tipo
Orientación
Color
@media screen, print { ... }
@media (orientation:portrait) { ... }
@media (color) { /* Screen in color */ }
http://css-tricks.com/css-media-queries/
viernes, 12 de julio de 13
40. Adaptive / Responsive design
¿Es lo mismo adaptive que responsive?
Adaptive: Nosotros definimos los break points
Responsive: El contenido define los break points
viernes, 12 de julio de 13
41. Adaptive design
Diseñar para un contexto específico:
• Dispositivo (iphone, ipad ...)
• Tamaño de pantalla (1024x768, 320x480...)
• Resolución (retina display ...)
viernes, 12 de julio de 13
42. Flex your media
img, video, object {
max-width: 100%;
}
img, video, object {
width: 100%;
}
Modern browsers FU.. IE 6
viernes, 12 de julio de 13