LAB#12 Responsive Web
Design
322432 Web Design Technology
Responsive Web Design
Responsive Web Design
•
•
• Relative
Fluid Layouts (%)
• Breakpoints
Media Queries
• Meta Viewport
• Device
•
• Relative Fluid
Layouts (%)
Example
http://learn.shayhowe.com/advanced-html-css/responsive-web-design
Breakpoints
Media Queries
Meta Viewport
Example
@media screen and (min-width: 800px) and
(max-width: 1200px) { .test { font-
size: 14pt; } }
http://www.designil.c...
Lab#13 responsive web design
Lab#13 responsive web design
Upcoming SlideShare
Loading in …5
×

Lab#13 responsive web design

645 views

Published on

Published in: Business, Technology
  • Be the first to comment

Lab#13 responsive web design

  1. 1. LAB#12 Responsive Web Design 322432 Web Design Technology
  2. 2. Responsive Web Design
  3. 3. Responsive Web Design • • • Relative Fluid Layouts (%) • Breakpoints Media Queries • Meta Viewport • Device
  4. 4.
  5. 5. • Relative Fluid Layouts (%) Example http://learn.shayhowe.com/advanced-html-css/responsive-web-design
  6. 6. Breakpoints Media Queries
  7. 7. Meta Viewport
  8. 8. Example @media screen and (min-width: 800px) and (max-width: 1200px) { .test { font- size: 14pt; } } http://www.designil.com/what-is-responsive-web-design-1.html @media screen and ( ) and ( ) and ... { /* CSS

×