Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design - Polopoly GeekNight Blixttal

Responsive Design - Polopoly GeekNight Blixttal

Henrik Ekelöf

November 23, 2011
Tweet

Other Decks in Programming

Transcript

  1. /* Här ovanför finns grundstyle - färger, fonter etc */

    article { float: right; width: 70%; } aside { float: right; width: 30%; }
  2. article { float: right; width: 70%; } aside { float:

    right; width: 30%; } @media all and (max-width: 768px) { article, aside { float: none; width: 100%; } }
  3. article { float: right; width: 70%; } aside { float:

    right; width: 30%; } @media all and (max-width: 768px) { article, aside { float: none; width: 100%; } }
  4. /* Här ovanför finns grundstyle - färger, fonter etc */

    @media all and (min-width: 768px) { article { float: right; width: 70%; } aside { float: right; width: 30%; } }
  5. ‣ Optimera inte webbplatser för specifika typer av enheter (varken

    små eller stora) ‣ Responsive Design är det sätt vi kommer bygga webb på den närmaste framtiden ‣ Jobba alltid nerifrån och upp med CSS