Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (16)
Similar a Introduction to Responsive Web Design
Similar a Introduction to Responsive Web Design (20)
Más de Shawn Calvert
Introduction to Responsive Web Design
- 1. RESPONSIVE / BOOTSTRAP 22-3376 Web Design 2 // Columbia College Chicago
- 2. What is Responsive Web Design?
- 3. Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it
- 6. Media Types <head>! <link rel="stylesheet" type="text/css" href="stylesheet.css">! <link rel="stylesheet" type="text/css" href="print.css" media="print">! </head> The media attribute specifies what media/device the target resource is optimized for. The most common usage is for overriding styles for printing.
- 7. Media Types @media print {! p {font-size: 20px;! color: red;! }! } The @media rule allows different style rules for different media in the same style sheet.
- 9. Media Queries Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). ! A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. http://www.w3.org/TR/css3-mediaqueries/
- 10. Media Queries @media print {! p {font-size: 20px;! color: red;! }! }
- 11. Viewport <meta name=“viewport” content=“width=device-width, initial-scale=1.0> Many small devices will automatically scale up or down your website to around 960px. This header tag tells the browser to scale the content to the actual window size of the device.
- 12. Breakpoints
- 13. Breakpoints A simple version from the framework ‘Base’: @media only screen and (min-width: 740px) and (max-width: 959px) { } @media only screen and (max-width: 739px) { } http://matthewhartman.github.io/base/
- 14. @media only screen and (min-width: 740px) and (max-width: 959px) { ! When viewed on a screen AND Minimum width of screen is at least 740px but not more than 959px ! Breakpoints
- 15. Breakpoints @media only screen and (max-width: 739px) {} (default) @media only screen and (min-width: 740px) and (max-width: 959px) {}
- 16. Tutorial ! 1 Responsive Test
- 17. What is Mobile First?
- 18. What is Mobile First? ! It Mobile up, not Desktop down.
- 21. Mobile-first approach from Bootstrap 3.0: @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } ! Breakpoints (Mobile-First) http://getbootstrap.com/
- 22. Breakpoints: Mobile First (Bootstrap) (default) @media (min-width: 768px) @media (min-width: 998px) @media (min-width: 1200px)
- 27. Tutorial ! 2 Bootstrap Simple
- 32. Tutorial ! 3 Bootstrap Nav