@@pl > … (mobiles first). Das hab ich gemacht und dann gesehen dass der IE8, der keine Media-Queries kennt, die Seite stets im mobile-Modus darstellt. Dass es keine™ Browser gibt, die keine _media queries_{: lang="en"} kennen, [hatten](https://forum.selfhtml.org/self/2016/feb/4/veraltete-browser/1660363#m1660363) wir schon. > Also hab ich meine Media-Queries rumgedreht … Letztens erst einen Artikel drüber gelesen (den ich jetzt natürlich nicht wiederfinde). Wierum man _media queries_{: lang="en"} verwendet (`min-width` vs. `max-width`), hängt auch von der Defaultdarstellung in Browsern ab. Blöcke (`section`, `article`, `div` etc.) werden untereinander dargestellt – so wie man es für kleine Viewports haben möchte. Wenn man auf größeren Viewports Blöcke nebeneinander haben möchte, dann ändert man das Defaultverhalten nur für größere Viewports – mit '`@media (min-width: …)`{: .language-css style="white-space: nowrap"}'. Für responsive Tabellen bspw. wäre es aber unsinnig, erst ~~~css table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block } ~~~ zu setzen und dann mit ~~~css @media (min-width: …) { table { display: table } caption { display: table-caption } colgroup { display: table-column-group } col { display: table-column } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } tr { display: table-row } th, td { display: table-cell } } ~~~ mühsam den Ursprungszustand wiederherzustellen. Stattdessen ändert man die Defaultdarstellung eben nur für kleine Viewports – mit `max-width`: ~~~css @media (max-width: …) { table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block } } ~~~ So stehen dann '`@media (min-width: …)`{: .language-css style="white-space: nowrap"}'- und '`@media (max-width: …)`{: .language-css style="white-space: nowrap"}'-Regeln in friedlicher Koexistenz im selben Stylesheet. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@pl > … (mobiles first). Das hab ich gemacht und dann gesehen dass der IE8, der keine Media-Queries kennt, die Seite stets im mobile-Modus darstellt. Dass es keine™ Browser gibt, die keine _media queries_{: lang="en"} kennen, [hatten](https://forum.selfhtml.org/self/2016/feb/4/veraltete-browser/1660363#m1660363) wir schon. > Also hab ich meine Media-Queries rumgedreht … Letztens erst einen Artikel drüber gelesen (den ich jetzt natürlich nicht wiederfinde). Wierum man _media queries_{: lang="en"} verwendet (`min-width` vs. `max-width`), hängt auch von der Defaultdarstellung in Browsern ab. Blöcke (`section`, `article`, `div` etc.) werden untereinander dargestellt – so wie man es für kleine Viewports haben möchte. Wenn man auf größeren Viewports Blöcke nebeneinander haben möchte, dann ändert man das Defaultverhalten nur für größere Viewports – mit `@media (min-width: …)`{: .language-css style="white-space: nowrap"}. Für responsive Tabellen bspw. wäre es aber unsinnig, erst ~~~css table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block } ~~~ zu setzen und dann mit ~~~css @media (min-width: …) { table { display: table } caption { display: table-caption } colgroup { display: table-column-group } col { display: table-column } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } tr { display: table-row } th, td { display: table-cell } } ~~~ mühsam den Ursprungszustand wiederherzustellen. Stattdessen ändert man die Defaultdarstellung eben nur für kleine Viewports – mit `max-width`: ~~~css @media (max-width: …) { table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block } } ~~~ LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@pl > … (mobiles first). Das hab ich gemacht und dann gesehen dass der IE8, der keine Media-Queries kennt, die Seite stets im mobile-Modus darstellt. Dass es keine™ Browser gibt, die keine _media queries_{: lang="en"} kennen, [hatten](https://forum.selfhtml.org/self/2016/feb/4/veraltete-browser/1660363#m1660363) wir schon. > Also hab ich meine Media-Queries rumgedreht … Letztens erst einen Artikel drüber gelesen (den ich jetzt natürlich nicht wiederfinde). Wierum man _media queries_{: lang="en"} verwendet (`min-width` vs. `max-width`), hängt auch von der Defaultdarstellung in Browsern ab. Blöcke (`section`, `article`, `div` etc.) werden untereinander dargestellt – so wie man es für kleine Viewports haben möchte. Wenn man auf größeren Viewports Blöcke nebeneinander haben möchte, dann ändert man das Defaultverhalten nur für größere Viewports – mit `@media (min-width: …)`{: .language-css style="white-space: nowrap"}. Für responsive Tabellen wäre es aber unsinnig, erst ~~~css table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block } ~~~ zu setzen und dann mit ~~~css @media (min-width: …) { table { display: table } caption { display: table-caption } colgroup { display: table-column-group } col { display: table-column } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } tr { display: table-row } th, td { display: table-cell } } ~~~ mühsam den Ursprungszustand wiederherzustellen. Stattdessen ändert man die Defaultdarstellung eben nur für kleine Viewports – mit `max-width`: ~~~css @media (max-width: …) { table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block } } ~~~ LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)