tag:forum.selfhtml.org,2005:/self Responsive Design - Größenangaben – SELFHTML-Forum 2018-06-15T17:24:25Z https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724760#m1724760 Gunnar W. 2018-06-15T08:17:23Z 2018-06-15T08:18:40Z Responsive Design - Größenangaben <p>Hallo zusammen, ich habe zwei Fragen.</p> <p>I. Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?</p> <p>II. Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724762#m1724762 MrMurphy1 2018-06-15T08:25:28Z 2018-06-15T08:25:28Z Responsive Design - Größenangaben <p>Hallo</p> <p>I. Ja. Angaben in em haben keinen Vorteil.</p> <p>II. Nein. Die Darstellung hängt nicht von der Bildschirmgröße des Endgeräts ab, sondern vom Inhalt der Webseite.</p> <p>Gruss</p> <p>MrMurphy</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724766#m1724766 at 2018-06-15T08:30:56Z 2018-06-15T08:30:56Z Responsive Design - Größenangaben <p>Hallo Gunnar.</p> <blockquote> <p>Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?</p> </blockquote> <p>Das würde gelten, wenn <code>1em</code> immer <code>16px</code> entspräche. Es gilt schon dann nicht, wenn das anderswo im CSS der Website oder des Browsers anders definiert wird.</p> <blockquote> <p>Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?</p> </blockquote> <p>Hier wird gern angeführt, dass sich die die Darstellung nach dem Inhalt richten soll. Konkret heißt das hier, dass das Umschalten zwischen unterschiedlichen Layouts nicht anhand der Viewports vorgenommen werden soll, sondern anhand der Breite der Inhalte. Da man die Inhalte aber beim Einsatz eines Content Management Systems nicht vorwegnehmen kann, gibt es das, was du suchst, zumindest in Form von <a href="http://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints" rel="nofollow noopener noreferrer">Anhaltspunkten</a>.</p> <p>MfG, at</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724767#m1724767 J o 2018-06-15T08:34:31Z 2018-06-15T08:34:31Z Responsive Design - Größenangaben <p>Hey,</p> <blockquote> <p>I. Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?</p> </blockquote> <p>Jein, <code>em</code> ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von <code>1em</code> hat und <code>font-size: 200%;</code> dann ist der Container 32px hoch.</p> <blockquote> <p>II. Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?</p> </blockquote> <p>Ja, so eine Aufstellung gibt es, lass mich kurz schaun... zum Beispiel <a href="https://www.mydevice.io/" rel="nofollow noopener noreferrer">hier</a>.</p> <p>Gruß<br> Jo</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724769#m1724769 Auge 2018-06-15T08:35:42Z 2018-06-15T08:35:42Z Responsive Design - Größenangaben <p>Hallo</p> <blockquote> <p>I. Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?</p> </blockquote> <p>Ja, aber …</p> <p>Browser auf Desktopsystemen werden typischerweise mit einer Standardschriftgröße von 16px ausgeliefert. Auf so konfigurierten Systemen entspricht 1em 16px. Wenn man aber die Standardschriftgröße auf einen anderen Wert in Pixeln einstellt, verändert sich auch die Größe von einem em.</p> <p>Mit einer Media-Angabe basierend auf px verändert sich das Textbild (kürzere, dafür mehr Zeilen bei größerer Schriftgröße als von Seitenautor angenommen). Basiert die media-Angabe hingegen auf em, wächst die Größe eines Containers proportional zur tatsächlich verwendeten Schriftgröße beim Benutzer der Seite.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724772#m1724772 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-15T08:48:49Z 2018-06-15T14:04:02Z Responsive Design - Größenangaben <p>@@Gunnar W.</p> <blockquote> <p>Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?</p> </blockquote> <p>Nein. 16px ist die Voreinstellung der Schriftgröße in vielen Browsern (damit ein guter Richtwert), aber nicht in allen.</p> <p>Vergiss am besten, dass es überhaupt soetwas wie Pixel gibt. Wann immer™ in einem Stylesheet <code class="bad">px</code> auftaucht, halte ich das für einen Fehler.</p> <blockquote> <p>Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?</p> </blockquote> <p>Ja, die gibt es:</p> <p><a href="/images/0974ab29-7e05-44de-b291-2b88525e67e1.png" rel="noopener noreferrer"><img src="/images/0974ab29-7e05-44de-b291-2b88525e67e1.png?size=medium" alt="Grafik mit unzähligen verschieden Bildschirmgrößen von Android-Geräten" loading="lazy"></a></p> <p>Du siehst, dass eine solche Aufstellung unnütz ist. <em lang="en">Responsiv design</em> heißt nicht, für einige (nach welchen Kriterien auch immer) auserwählte Geräte zu entwickeln, sondern für alle.</p> <p><em>“Responsive design is adapting design to an unknown browser.<br> Inclusive design is adapting design to an unknown user.”</em><br> —Eric Bailey </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724782#m1724782 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-15T09:26:12Z 2018-06-15T09:26:12Z Responsive Design - Größenangaben <p>hallo</p> <blockquote> <p>I. Gelesen habe ich, dass in der @media-Angabe die Einheit für die Viewportgröße mit "em" abgegeben werden soll. Wird aber nicht doch auch em in Pixel definiert (z.B. 1em=16px), so dass das Ergebnis das selbe wäre?</p> </blockquote> <p>Wie andere schon sagten: em ist relativ zur User-definierten Schriftgrösse.</p> <blockquote> <p>II. Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?</p> </blockquote> <p>Ich bin mit der Firefox-Viewport Simulation recht zufrieden. Allerdings ist eben eine Angabe von em gar nicht mehr auf einzelne Geräte rückführbar, was sowieso nicht notwendig ist.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724829#m1724829 Gunnar W. 2018-06-15T15:23:06Z 2018-06-15T15:23:06Z Responsive Design - Größenangaben <p>Hi, wenn ich also zwei Angaben mache der Art:</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 60em<span class="token punctuation">)</span> </code></pre> <p>und</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span> </code></pre> <p>ist dann die Reihenfolge der @media-Angabe entscheidend? Bei einer Viewportgröße von 70em würden aber immer beide @media-Bedingungen zutreffen.</p> <p>Oder müsste die kleinere der Angaben so lauten:</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 59em<span class="token punctuation">)</span> </code></pre> <p>Was aber dann bei einer Viewportgröße von 59.1em?</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724764#m1724764 Gunnar W. 2018-06-15T08:28:22Z 2018-06-15T08:28:55Z Responsive Design - Größenangaben <blockquote> <p>Hallo</p> <p>II. Nein. Die Darstellung hängt nicht von der Bildschirmgröße des Endgeräts ab, sondern vom Inhalt der Webseite.</p> </blockquote> <p>Wenn sie nicht von der Bildschirmgröße abhängt, warum dann @media-Angaben mit der Breite des Viewports?</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724775#m1724775 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-15T08:55:45Z 2018-06-15T08:55:45Z Responsive Design - Größenangaben <p>@@MrMurphy1</p> <blockquote> <p>I. Ja. Angaben in em haben keinen Vorteil.</p> </blockquote> <p>Doch, haben sie. Siehe in <a href="https://forum.selfhtml.org/self/2016/sep/7/das-wtf-zur-wochenmitte-simple-css-media-queries-generator/1675022#m1675022" rel="noopener noreferrer">diesem Posting</a> verlinkte Quellen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724801#m1724801 marctrix self@mhis.de https://www.mhis.de 2018-06-15T13:13:58Z 2018-06-15T13:13:58Z Responsive Design - Größenangaben <p>Hej MrMurphy1,</p> <blockquote> <p>I. Ja. Angaben in em haben keinen Vorteil.</p> </blockquote> <p>Doch, denn sie funktionieren auch dann, wenn der Platz auf dem Bildschirm wegen Dchriftänderunegn knapp wird oder massenhaft zur Verfügung steht und genutzt werden sollte (Stichwort Tunnelblick).</p> <blockquote> <p>II. Nein. Die Darstellung hängt nicht von der Bildschirmgröße des Endgeräts ab, sondern vom Inhalt der Webseite.</p> </blockquote> <p>Darum ist die Angabe unbedingt(!) in em zu machen!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724774#m1724774 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-15T08:52:38Z 2018-06-15T08:52:38Z Responsive Design - Größenangaben <p>@@J o</p> <blockquote> <p>Jein, <code>em</code> ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von <code>1em</code> hat und <code>font-size: 200%;</code> dann ist der Container 32px hoch.</p> </blockquote> <p>Bei dir. Nicht bei allen.</p> <blockquote> <p>Ja, so eine Aufstellung gibt es, lass mich kurz schaun... zum Beispiel <a href="https://www.mydevice.io/" rel="nofollow noopener noreferrer">hier</a>.</p> </blockquote> <p>BTW, „hier“ ist kein sinnvoller Linktitel. Besser: <em>Ja, so eine <a href="https://www.mydevice.io/" rel="nofollow noopener noreferrer">Aufstellung</a> gibt es …</em></p> <p>„Sinnvoll“ und „besser“ bezieht sich hier allein auf den Linktitel, nicht auf die Aufstellung.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724779#m1724779 Tabellenkalk 2018-06-15T09:10:33Z 2018-06-15T14:04:37Z Responsive Design - Größenangaben <p>Hallo,</p> <blockquote> <p><a href="/images/0974ab29-7e05-44de-b291-2b88525e67e1.png" rel="noopener noreferrer"><img src="/images/0974ab29-7e05-44de-b291-2b88525e67e1.png?size=medium" alt="Grafik mit unzähligen verschieden Bildschirmgrößen von Android-Geräten" loading="lazy"></a></p> </blockquote> <p>Ich glaub' da musst du noch mal ran. Da sind definitiv zu wenig Hochformate bei…<br> scnr</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724804#m1724804 Matthias Scharwies mscharwies@selfhtml.org 2018-06-15T13:21:51Z 2018-06-15T14:04:19Z Responsive Design - Größenangaben <p>Servus!</p> <blockquote> <blockquote> <p>Gibt es eine Aufstellung der Viewportgrößen für die am verbreitesten Geräte (vom Smartphone bis zu den größeren PC-Bildschirmen)?</p> </blockquote> <p>Ja, die gibt es:</p> <p><a href="/images/0974ab29-7e05-44de-b291-2b88525e67e1.png" rel="noopener noreferrer"><img src="/images/0974ab29-7e05-44de-b291-2b88525e67e1.png?size=medium" alt="Grafik mit unzähligen verschieden Bildschirmgrößen von Android-Geräten" loading="lazy"></a></p> </blockquote> <p>@@Gunnar Bittersmann Kannst du mir bitte sagen, wo du das Bild her hast und, wenn es von Dir kommt, ob ich es im Wiki verwenden kann/ darf?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun: <em><a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a></em> </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724790#m1724790 J o 2018-06-15T10:36:16Z 2018-06-15T10:36:16Z Responsive Design - Größenangaben <p>Hey,</p> <blockquote> <blockquote> <p>Jein, <code>em</code> ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von <code>1em</code> hat und <code>font-size: 200%;</code> dann ist der Container 32px hoch.</p> </blockquote> <p>Bei dir. Nicht bei allen.</p> </blockquote> <p>Wo denn nicht?</p> <p>Gruß<br> Jo</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724788#m1724788 Gunnar W. 2018-06-15T10:31:35Z 2018-06-15T10:31:35Z Responsive Design - Größenangaben <p>Das ist ja verrückt, diese Vielzahl von Größen!</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724803#m1724803 marctrix self@mhis.de https://www.mhis.de 2018-06-15T13:21:33Z 2018-06-15T13:21:33Z Responsive Design - Größenangaben <p>Hej Gunnar,</p> <blockquote> <p>Das ist ja verrückt, diese Vielzahl von Größen!</p> </blockquote> <p>Genau deshalb macht man die breakpoints von seinem Inhalt abhängig (em), so dass die Seite auf allen geraten ordentlich aussieht. Für ein paar kann man dann noch ein wenig Finetuning betreiben. So kann es für Apple sinnvoll sein, auf die Auflösungen der eigenen Geräte zu optimieren (oder auch cniht, weil man ja sicher auch gerne die Nutzer von Konkurrenzgeräten von der Großartigkeit des Apple-Universums mit einer Cliquen Website überzeugen möchte - Also muss auch Apples Site auf allen Geräten gut aussehen).</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724797#m1724797 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-15T11:57:29Z 2018-06-15T11:57:29Z Responsive Design - Größenangaben <p>@@J o</p> <blockquote> <blockquote> <blockquote> <p>Jein, <code>em</code> ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von <code>1em</code> hat und <code>font-size: 200%;</code> dann ist der Container 32px hoch.</p> </blockquote> <p>Bei dir. Nicht bei allen.</p> </blockquote> <p>Wo denn nicht?</p> </blockquote> <ul> <li> <p>Bei allen, die in ihrem Browser eine andere Schriftgröße einstellen.</p> </li> <li> <p>Im UC-Browser; da entspricht 1em per Vereinstellung 19px.</p> </li> </ul> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724802#m1724802 marctrix self@mhis.de https://www.mhis.de 2018-06-15T13:17:43Z 2018-06-15T13:17:43Z Responsive Design - Größenangaben <p>Hej J,</p> <blockquote> <blockquote> <blockquote> <p>Jein, <code>em</code> ist nicht in Pixel definiert sondern über die Größe der Schrift. Und die ist Standartmäßig 100% = 16 px. Wenn also irgendein Container eine Höhe von <code>1em</code> hat und <code>font-size: 200%;</code> dann ist der Container 32px hoch.</p> </blockquote> <p>Bei dir. Nicht bei allen.</p> </blockquote> <p>Wo denn nicht?</p> </blockquote> <p>Bei mir - ich surfe standardmäßig mit 150% Schriftzoom!</p> <p>Bei mir ist 1em also standardmäßig 24px groß und ich bin sehr dankbar dafür, dass sich als Bedingung für das Umschalten von Layouts eine Angabe in em durchgesetzt hat.</p> <p>Es gibt nur wenige Webseitenbetreiber die das anders sehen, so dass ich deren Seiten getrost zugunsten anderer links liegen lassen kann!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724812#m1724812 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-15T13:59:06Z 2018-06-15T13:59:06Z Responsive Design - Größenangaben <p>@@marctrix</p> <blockquote> <p>Bei mir - ich surfe standardmäßig mit 150% Schriftzoom!</p> </blockquote> <p>Was etwas anderes ist als die Einstellung der Schriftgröße im Browser.</p> <blockquote> <p>Bei mir ist 1em also standardmäßig 24px groß</p> </blockquote> <p>Das wage ich zu bezweifeln. Was zeigt der <a href="https://bittersmann.de/test/em-px" rel="nofollow noopener noreferrer">Test</a>?</p> <p>Du bist nicht dem Irrtum aufgesessen, <code>px</code> wären Gerätepixel, oder?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724814#m1724814 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-15T14:05:42Z 2018-06-15T14:05:42Z Responsive Design - Größenangaben <p>@@Matthias Scharwies</p> <blockquote> <p>Kannst du mir bitte sagen, wo du das Bild her hast</p> </blockquote> <p>Quelle: Internet </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724817#m1724817 marctrix self@mhis.de https://www.mhis.de 2018-06-15T14:26:09Z 2018-06-15T14:26:09Z Responsive Design - Größenangaben <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <p>Bei mir - ich surfe standardmäßig mit 150% Schriftzoom!</p> </blockquote> <p>Was etwas anderes ist als die Einstellung der Schriftgröße im Browser.</p> <blockquote> <p>Bei mir ist 1em also standardmäßig 24px groß</p> </blockquote> <p>Das wage ich zu bezweifeln. Was zeigt der <a href="https://bittersmann.de/test/em-px" rel="nofollow noopener noreferrer">Test</a>?</p> <p>Du bist nicht dem Irrtum aufgesessen, <code>px</code> wären Gerätepixel, oder?</p> </blockquote> <p><a href="/images/d0fa043b-c2fe-4fa1-bb5f-ae93a69d267a.png" rel="noopener noreferrer"><img src="/images/d0fa043b-c2fe-4fa1-bb5f-ae93a69d267a.png?size=medium" alt="1em bei 1,5fachem Textzoom entspricht 24px für Standardschriften" title="1em bei 1,5fachem Textzoom entspricht 24px für Standardschriften" loading="lazy"></a></p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724820#m1724820 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-15T14:40:57Z 2018-06-15T14:40:57Z Responsive Design - Größenangaben <p>@@marctrix</p> <blockquote> <p>[24×24]</p> </blockquote> <p>Welcher Browser?</p> <p>Mein Firefox (macOS) zeigt da brav 16×16 an.</p> <p>Firefox skaliert beim Zoomen die CSS-Pixel. Andere Browser scheinen das wohl anders zu handhaben?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724825#m1724825 marctrix self@mhis.de https://www.mhis.de 2018-06-15T15:04:11Z 2018-06-15T15:04:54Z Responsive Design - Größenangaben <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <p>[24×24]</p> </blockquote> <p>Welcher Browser?</p> <p>Mein Firefox (macOS) zeigt da brav 16×16 an.</p> <p>Firefox skaliert beim Zoomen die CSS-Pixel. Andere Browser scheinen das wohl anders zu handhaben?</p> </blockquote> <p>Gerade ff ist der einzige, der meines Wissens nach noch Text-Zoom unterstützt. (Ansicht->Zoom->Text)</p> <p>Obwohl ie (und dann vielleicht auch Edge) können das auch.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724831#m1724831 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-15T15:32:53Z 2018-06-15T15:32:53Z Responsive Design - Größenangaben <p>hallo</p> <blockquote> <p>Was aber dann bei einer Viewportgröße von 59.1em?</p> </blockquote> <p>Wenn Regeln Breiten-Bereiche überlappen, ist die Reihenfolge entscheidend, aber immer nur bezogen auf die konkret definierten einzelnen Regeln, wobei immer noch die Regel höchster Spezifität gewinnt, egal in welchem media-Bereich sie definiert wurde.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724832#m1724832 Matthias Scharwies mscharwies@selfhtml.org 2018-06-15T15:35:53Z 2018-06-15T15:46:12Z Responsive Design - Größenangaben <p>Servus!</p> <blockquote> <p>Hi, wenn ich also zwei Angaben mache der Art:</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 60em<span class="token punctuation">)</span> </code></pre> <p>und</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span> </code></pre> <p>ist dann die Reihenfolge der @media-Angabe entscheidend?</p> </blockquote> <p>Ja, du überschreibst die ja wieder.</p> <blockquote> <p>Bei einer Viewportgröße von 70em würden aber immer beide @media-Bedingungen zutreffen.</p> </blockquote> <p>Genau</p> <blockquote> <p>Oder müsste die kleinere der Angaben so lauten:</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 59em<span class="token punctuation">)</span> </code></pre> <p>Was aber dann bei einer Viewportgröße von 59.1em?</p> </blockquote> <p>Dann würde diese media queries nicht zutreffen.</p> <p>Fang am besten ohne media queries an und leg Farben, Text und andere Stilvorgaben fest. Verzichte dabei auf alle Breiten und Höhen! Block-Elemente und Text sind automatisch (z.b. bei h1, p, ul ...) 100% breit.</p> <p>Wenn du jetzt den Bildschirm auseinanderziehst und merkst, dass bei ca 30em 2 Blockelemente nebeneinanderpassen, setzt du dort eine media queries:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 30em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">Festlegung für 2-Spaltenlayout body</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>2<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Wenn du die Seite weiter auseinanderziehst und Platz für mehr hast, kannst du eine weitere media queries machen, die die erste überschreibt:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 50em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">Festlegung für 3-Spaltenlayout body</span> <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>3<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 20em<span class="token punctuation">;</span> <span class="token comment">/* neue Breite */</span> <span class="token punctuation">}</span> <span class="token property">container</span><span class="token punctuation">:</span> </code></pre> <p>So etwas ist dann übersichtlicher als Breiten- und Höhenangaben quer durchs Stylesheet.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun: <em><a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a></em> </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724833#m1724833 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-15T15:49:32Z 2018-06-15T15:49:32Z Responsive Design - Größenangaben <p>@@Gunnar W.</p> <blockquote> <p>wenn ich also zwei Angaben mache der Art:</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 60em<span class="token punctuation">)</span> </code></pre> <p>und</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span> </code></pre> <p>ist dann die Reihenfolge der @media-Angabe entscheidend? Bei einer Viewportgröße von 70em würden aber immer beide @media-Bedingungen zutreffen.</p> </blockquote> <p>Die letzte Angabe gewinnt (bei gleicher Spezifiät der Selektoren).</p> <p>Bei von-klein-nach-groß (<code>min-width</code>, <em lang="en">mobile first</em>) sollte <code>40em</code> im Stylesheet vor <code>60em</code> stehen.</p> <blockquote> <p>Oder müsste die kleinere der Angaben so lauten:</p> <pre><code class="block language-css">@media only screen and <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40em<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 59em<span class="token punctuation">)</span> </code></pre> </blockquote> <p>Kommt drauf an: <a href="http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack" lang="en" rel="nofollow noopener noreferrer">overlapping vs. stacked</a></p> <blockquote> <p>Was aber dann bei einer Viewportgröße von 59.1em?</p> </blockquote> <p>Keiner der <em lang="en">media queries</em> greift.</p> <p>Hat sich <a href="https://forum.selfhtml.org/self/2014/jul/27/sass-mixin-media-rule-verknuepfung-der-expressions/1617554#m1617554" rel="noopener noreferrer">meine Vorhersage</a> eigentlich bewahrheitet? Muss ich glatt mal testen …</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724839#m1724839 Gunnar W. 2018-06-15T17:20:43Z 2018-06-15T17:20:43Z Responsive Design - Größenangaben <blockquote> <p>Kommt drauf an: <a href="http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack" lang="en" rel="nofollow noopener noreferrer">overlapping vs. stacked</a></p> </blockquote> <p>In dem Beispiel werden aber px angegeben. Mit em-Angaben wäre es wie mein Beispiel:</p> <blockquote> <blockquote> <p>Was aber dann bei einer Viewportgröße von 59.1em?</p> </blockquote> <p>Keiner der <em lang="en">media queries</em> greift.</p> </blockquote> https://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724841#m1724841 Matthias Scharwies mscharwies@selfhtml.org 2018-06-15T17:24:25Z 2018-06-15T17:24:25Z Responsive Design - Größenangaben <p>Servus!</p> <blockquote> <blockquote> <p>Kommt drauf an: <a href="http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack" lang="en" rel="nofollow noopener noreferrer">overlapping vs. stacked</a></p> </blockquote> <p>In dem Beispiel werden aber px angegeben. Mit em-Angaben wäre es wie mein Beispiel:</p> <blockquote></blockquote> </blockquote> <p>Das ist ja auch nicht falsch, aber weniger flexibel. Deshalb ist man zu em übergegangen.</p> <p>BTW:der Artikel ist von Oktober 2011!</p> <blockquote></blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun: <em><a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a></em> </div>