SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
7.
Dimensiones
1440 x 900 px (screen size)
1440 x 828 px (viewport)
1280 x 828 px (design space)
8.
Viewport & @media queries
/* Todos */
@media only screen { }
/* De Tablet a Smartphone */
@media only screen and (min-width: 768px) {}
/* Hasta 1280px de ancho */
@media only screen and (min-width: 1280px) {}
/* Hasta 1440px de ancho */
@media only screen and (min-width: 1440px) {}
/* Orientación apaisada */
@media only screen and (orientation: landscape) {}
/* Orientación Vertical */
@media only screen and (orientation: portrait) {}
9.
Viewport & @media queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {}
/* Large screens ----------- */
@media tv and (min-device-width: 1152px) {}
@media tv and (min-device-width: 1728px) {}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {}
10.
Responsive Design
Un diseño para dominar a todos?
17.
Ratón vs Dedo vs Trackpad
Wheel/Scroll
Wheel/Zoom
Click
Mouse Hover
Slide
Pinch
Tap
Swipe
Dos Dedos (Arriba-Abajo)
Pinch
Click
Dos Dedos (Izq-Der)
Mouse Hover
18.
Responsive Design
Escoje como nacer, el caso de Flipboard
TabletTablet
19.
Responsive Design
Ni tan cerca ni tan lejos
TVTV