Responsive design en snabb resumé/förklaring

juni 6, 2012 § Lämna en kommentar

Responsive design är ett relativt nytt uttryck. Det innebär att skapa en design som är tillgänglig för alla skärm-upplösningar och alla ”devices” (t.ex tabloids och smartphones). Det viktigaste att tänka på är:

  • Använd ”em” istället för ”px” för all text på hemsidan
  • Definera width, padding och margin med %
  • För att dina bilder ska anpassa sig efter skärmen skriv:
    img {
    max-width: 50%;
    height: auto;}
  • Använd CSS3 media queries för att anpassa hemsidan till tabloids och smartphones. Exempel:
    @media screen and (max-width: 980px) {// skriv allt som du vill ska gälla mellan upplösningen 980px ner till 700px}
    @media screen and (max-width: 700px) {// skriv allt som du vill ska gälla mellan 700px ner till 480px}
    @media screen and (max-width: 480px) {// skriv allt som du vill ska gälla mellan 480px och neråt}
    Tänk på att media ärver all css som du definerade i den tidigare upplösningen.

Fortsätt designa!

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

Vad är detta?

Du läser för närvarande Responsive design en snabb resumé/förklaringTobiasboman's Blog.

Meta

%d bloggare gillar detta: