responsive webdesign 2018. 9. 4. · responsive_webdesign author: simon marik subject keywords...
TRANSCRIPT
![Page 1: Responsive Webdesign 2018. 9. 4. · Responsive_Webdesign Author: Simon Marik Subject Keywords Created Date: 5/12/2018 3:42:09 PM](https://reader030.vdocuments.site/reader030/viewer/2022011917/5fe598d12f7a970d075826bb/html5/thumbnails/1.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022011917/5fe598d12f7a970d075826bb/html5/thumbnails/2.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022011917/5fe598d12f7a970d075826bb/html5/thumbnails/3.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022011917/5fe598d12f7a970d075826bb/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022011917/5fe598d12f7a970d075826bb/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022011917/5fe598d12f7a970d075826bb/html5/thumbnails/6.jpg)
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