6
edu.marik.cc Responsive Webdesign so viele Displaygrößen... Quelle: https://goo.gl/images/AinXCk

Responsive Webdesign 2018. 9. 4. · Responsive_Webdesign Author: Simon Marik Subject Keywords Created Date: 5/12/2018 3:42:09 PM

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Responsive Webdesign 2018. 9. 4. · Responsive_Webdesign Author: Simon Marik Subject Keywords Created Date: 5/12/2018 3:42:09 PM

edu.marik.cc

Responsive Webdesignso viele Displaygrößen...

Quelle: https://goo.gl/images/AinXCk

Page 2: Responsive Webdesign 2018. 9. 4. · Responsive_Webdesign Author: Simon Marik Subject Keywords Created Date: 5/12/2018 3:42:09 PM

edu.marik.cc

Back in the days...

• iPhone (2007) und iPad brachtenzahlreiche neue Displaygrößen• Stellte Webdesigner vor ein Problem• Websites nur für Desktops ausgerichtet

• Rückblick: Tabellenkonstruktionen...

• Ethan Marcotte (Webdesigner)• A List Apart Artikel „Fluid Grids“ (2009)

und „Responsive Webdesign“ (2010)• Idee: Schaffung eines flexiblen

(„responsiven“) Gitters („Grids“)• Insgesamt 12 Spalten-div‘s (.col-1-12)• Abhängig von CSS Media Queries

• nach min- oder max-width des DisplaysQuelle: https://goo.gl/images/Kojpcj

Page 3: Responsive Webdesign 2018. 9. 4. · Responsive_Webdesign Author: Simon Marik Subject Keywords Created Date: 5/12/2018 3:42:09 PM

edu.marik.cc

Fluid Grid1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12

1/6 1/6 1/6 1/6 1/6 1/6

1/4 1/4 1/4 1/4

1/3 1/3 1/3

1/2 1/2

1

Page 4: Responsive Webdesign 2018. 9. 4. · Responsive_Webdesign Author: Simon Marik Subject Keywords Created Date: 5/12/2018 3:42:09 PM

edu.marik.cc

Fluid GridSchreibweise im CSS-Code:

.col-1 { width: 8.33%; }

.col-2 { width: 16.66%; }

.col-3 { width: 25%; }

.col-4 { width: 33.33%; }

.col-5 { width: 41.66%; }

.col-6 { width: 50%; }

.col-7 { width: 58.33%; }

.col-8 { width: 66.66%; }

.col-9 { width: 75%; }

.col-10 { width: 83.33%; }

.col-11 { width: 91.66%; }

.col-12 { width: 100%; }

.col-2 .col-2 1 1 .col-4 .col-2

.col-4 .col-4 .col-3 1

.col-7 .col-5

Page 5: Responsive Webdesign 2018. 9. 4. · Responsive_Webdesign Author: Simon Marik Subject Keywords Created Date: 5/12/2018 3:42:09 PM

edu.marik.cc

CSS Media Queries

Quelle: Marik – Kekse ohne Salz schmecken nicht

Page 6: Responsive Webdesign 2018. 9. 4. · Responsive_Webdesign Author: Simon Marik Subject Keywords Created Date: 5/12/2018 3:42:09 PM

edu.marik.cc

CSS Media Queries

Schreibweise im CSS-Code:

@media screen and (min-width: 1024px) {body {

background-color: blue;}

}

Quelle: Marik – Kekse ohne Salz schmecken nicht