Responsive Web Design for Beginners

83f7b66c4dee7effbb3717027f99282b?s=47 Sayanee
June 12, 2012

Responsive Web Design for Beginners

CSS3 Media Queries, Fluid Web Design

83f7b66c4dee7effbb3717027f99282b?s=128

Sayanee

June 12, 2012
Tweet

Transcript

  1. 10.
  2. 12.

    in *.css file: /* Desktop */ @media (max-width: 1200px) {

    } /* iPad Landscape */ @media (max-width: 1024px) { } /* iPad portrait */ @media (max-width: 760px) { } /* iPhones */ @media (max-width: 600px) { } Wednesday, June 13, 12
  3. 14.

    article, aside{ float: left; } article{ width: 72.5%; margin: 0

    2.5% 10px 0; } aside{ width: 25%; margin: 0 0 10px 0; } @media (max-width: 760px) { article, aside{ float: none; width: 100%; } } Wednesday, June 13, 12
  4. 16.

    in *.css file: /* Desktop */ footer{ display: block; }

    @media (max-width: 1200px) { .footer-mobile{ display: none; } } in *.css file: /* iPad portrait */ @media (max-width: 760px) { .footer-mobile{ display: block; } footer{ display: none; } } Wednesday, June 13, 12
  5. 19.

    resources 50 fantastic tools responsive web design [netmagazine] 8 tools

    and scripts for responsive web design [webdesignledger] 10 excellent tools for responsive web design [sixrevisions] responsive web design techniques tools and strategies [smashing magazine] Responsive Web Design by Ethan Marcotte [Article in A List Apart, 25 May 2010] [Book in A Book Apart] www. mediaqueri.es Wednesday, June 13, 12