tag:forum.selfhtml.org,2005:/self responsive_Raster_ohne_Media_Queries – SELFHTML-Forum 2020-03-07T05:32:08Z https://forum.selfhtml.org/self/2020/mar/06/responsive-raster-ohne-media-queries/1766478?srt=yes#m1766478 michaah 2020-03-06T19:29:32Z 2020-03-06T19:29:32Z responsive_Raster_ohne_Media_Queries <p>Hi, ich bin dabei mich im wiki hier etwas "weiterzubilden" weil ich einen vorhandenen Webauftritt fit für mobile Geräte machen will. Dabei bin ich über die oben genannte Seite gestolpert.</p> <p>Ich hatte erwartet, dass die dort dargestellten Beispiele auch brauchbar für kleine mobile Geräte (smartfons) wären. Dazu müßten sich jedoch die im Gritt definierten Spalten irgendwann zu <em>einer</em> Spalte zusammenschieben bzw untereinandern anordnen... zumindest meinem Verständnis von "responsive Design" nach. Vielleicht ist mein Verständnis falsch, aber es ging hier ja explizit darum notwendige Anpassungen ohne Media_Queries hinzubekommen. So wie das aber hier aussieht verschwindet auf mobilen Geräten ein Teil des Inhalts und seitliches scrollen wird nötig. Das ist ja genau das was eigentlich verhindert werden soll.</p> <p>Vielleicht ist mein Grundverständnis unpassend. Der Titel hat bei mir den Eindruck erweckt es wäre möglich ein Grid so aufzubauen, dass es flexibel genug wäre um von einer Desktop Darstellung bis hin zu einer adäquaten Smartfon Darstellung <em>ohne Media_Queries</em> auszukomen. Verstehe ich etwas falsch oder wofür ist dieses Beispiel ein Beispiel?</p> https://forum.selfhtml.org/self/2020/mar/06/responsive-raster-ohne-media-queries/1766480?srt=yes#m1766480 Matthias Scharwies mscharwies@selfhtml.org 2020-03-06T20:42:42Z 2020-03-06T20:55:07Z responsive_Raster_ohne_Media_Queries <p>Servus!</p> <blockquote> <p>Ich hatte erwartet, dass die dort dargestellten Beispiele auch brauchbar für kleine mobile Geräte (smartfons) wären. Dazu müßten sich jedoch die im Gritt definierten Spalten irgendwann zu <em>einer</em> Spalte zusammenschieben bzw untereinandern anordnen... zumindest meinem Verständnis von "responsive Design" nach.</p> </blockquote> <p>Du hast Recht. Problem ist der article, der über zwei Rasterelemente geht. Deshalb hat die Seite eine Minimalbreite von 40em.</p> <p>Hier müsste man den Regelsatz in eine media queries setzen. Das mach ich übermorgen.</p> <p>Alternativ könnte man dies notieren:</p> <pre><code class="block language-css"><span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / -1<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Dann würde article eine ganze Reihe einnehmen, egal, wie viele Rasterfelder es gibt.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div> https://forum.selfhtml.org/self/2020/mar/06/responsive-raster-ohne-media-queries/1766484?srt=yes#m1766484 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-03-06T21:29:14Z 2020-03-06T21:29:14Z responsive_Raster_ohne_Media_Queries <p>@@michaah</p> <blockquote> <p>es ging hier ja explizit darum notwendige Anpassungen ohne Media_Queries hinzubekommen. So wie das aber hier aussieht verschwindet auf mobilen Geräten ein Teil des Inhalts und seitliches scrollen wird nötig. Das ist ja genau das was eigentlich verhindert werden soll.</p> </blockquote> <p>Ja, <code>grid-template-columns: repeat(auto-fill, minmax(20em, 1fr))</code> erzeugt mindestens eine Spalte, die mindestens 20em breit ist. Bei Viewports schmaler als 20em muss horizontal gescrollt werden.</p> <p>Man muss also per Media-Query dafür sorgen, dass diese Regel erst bei breiteren Viewports greift. Ganz ohne Media-Query geht’s doch (noch) nicht, AFAIK.</p> <p>LLAP </p> <div class="signature">-- <br> Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. </div> https://forum.selfhtml.org/self/2020/mar/06/responsive-raster-ohne-media-queries/1766488?srt=yes#m1766488 michaah 2020-03-06T22:41:59Z 2020-03-06T22:41:59Z responsive_Raster_ohne_Media_Queries <blockquote> <p>Hier müsste man den Regelsatz in eine media queries setzen. Das mach ich übermorgen.</p> </blockquote> <p>Aha, ok, da bin ich gespannt, wie das konkret aussieht und funktioniert ... wenn auch mit M_Q.</p> <blockquote> <p>Alternativ könnte man dies notieren:</p> <pre><code class="block language-css"><span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / -1<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Dann würde article eine ganze Reihe einnehmen, egal, wie viele Rasterfelder es gibt.</p> </blockquote> <p>Puh, ich glaube da muß ich noch an meinen Verständnis von den Rahmenbedingungen und Zwängen von "article" arbeiten um das zu durchblicken ...</p> <p>Danke soweit. Ich habe also offenbar einen Bug gemeldet ;-)</p> https://forum.selfhtml.org/self/2020/mar/06/responsive-raster-ohne-media-queries/1766490?srt=yes#m1766490 Matthias Scharwies mscharwies@selfhtml.org 2020-03-07T05:32:08Z 2020-03-07T06:48:55Z responsive_Raster_ohne_Media_Queries <p>Servus!</p> <blockquote> <blockquote> <p>Danke soweit. Ich habe also offenbar einen Bug gemeldet ;-)</p> </blockquote> </blockquote> <p>Vielen Dank für Deine Rückmeldung!</p> <p>Ein Bug wäre es imho, wenn Grid Layout nicht richtig funktionieren würde. Hier hatte <strong>ich</strong> 2017 Blödsinn gemacht:</p> <blockquote> <p>Puh, ich glaube da muß ich noch an meinen Verständnis von den Rahmenbedingungen und Zwängen von "article" arbeiten um das zu durchblicken</p> </blockquote> <p>Nein, man darf das nur nie vergessen! <code>article</code> ist wie <code>h1</code>und <code>p</code> ein Blockelement. Ich wollte eine längere Erklärung schreiben, die war aber schon vorhanden:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries#Grundlagen" rel="nofollow noopener noreferrer">responsive_Raster_ohne_Media_Queries#Grundlagen</a></li> </ul> <p>Ich hatte 2017 das flexible Grid Layout mit einer festen Angabe „zerschossen“:</p> <pre><code class="block language-css"><span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> 2 / 1 / 4 / 3<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* bedeutet: */</span> <span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / 4<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Wenn sich <code>article</code> über zwei Rasterfelder mit je 20em erstreckt, hat der Body eine Breite von mind. 40em. </p> <p>Ich habe jetzt auf feste Breiten verzichtet. Mit</p> <pre><code class="block language-css"><span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / -1<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>beginnt der Block an der ersten Rasterlinie und geht bis zur letzten (Negative Werte zählen von rechts.) Bei einer Spalte ist es dann nur eine, bei breiteren Viewports eben drei. Auch <code>span 2</code> ist flexibler als eine feste Zuordnung zu einer bestimten Reihe.</p> <blockquote> <blockquote> <p>Hier müsste man den Regelsatz in eine media queries setzen. Das mach ich übermorgen.</p> </blockquote> </blockquote> <p>Da habe ich jetzt drauf verzichtet. Falls Du wirklich unterhalb von 20em arbeiten willst, würde das so gehen:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>auto-fill<span class="token punctuation">,</span> 20em<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das letzte Beispiel mit den quadratischen Tiles in einer Bilderwand wird gerade hier im Forum entwickelt und wird in den nächsten Tagen online gestellt.</p> <p>Schau Dir mal besonders die ersten zwei Kapitel des Grid-Tutorials an:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid" rel="nofollow noopener noreferrer">CSS/Tutorials/Grid</a> <ul> <li>Einführung</li> <li>Grid-Container</li> </ul> </li> </ul> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div>