tag:forum.selfhtml.org,2005:/selfResponsive Design - Größenangaben – SELFHTML-Forum2018-06-15T17:24:25Zhttps://forum.selfhtml.org/self/2018/jun/15/responsive-design-groessenangaben/1724760#m1724760Gunnar W.2018-06-15T08:17:23Z2018-06-15T08:18:40ZResponsive 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#m1724762MrMurphy12018-06-15T08:25:28Z2018-06-15T08:25:28ZResponsive 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#m1724766at2018-06-15T08:30:56Z2018-06-15T08:30:56ZResponsive 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#m1724767J o2018-06-15T08:34:31Z2018-06-15T08:34:31ZResponsive 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#m1724769Auge2018-06-15T08:35:42Z2018-06-15T08:35:42ZResponsive 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#m1724772Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-06-15T08:48:49Z2018-06-15T14:04:02ZResponsive 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#m1724782beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-06-15T09:26:12Z2018-06-15T09:26:12ZResponsive 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#m1724829Gunnar W.2018-06-15T15:23:06Z2018-06-15T15:23:06ZResponsive 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#m1724764Gunnar W.2018-06-15T08:28:22Z2018-06-15T08:28:55ZResponsive 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#m1724775Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-06-15T08:55:45Z2018-06-15T08:55:45ZResponsive 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#m1724801marctrixself@mhis.dehttps://www.mhis.de2018-06-15T13:13:58Z2018-06-15T13:13:58ZResponsive 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#m1724774Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-06-15T08:52:38Z2018-06-15T08:52:38ZResponsive 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#m1724779Tabellenkalk2018-06-15T09:10:33Z2018-06-15T14:04:37ZResponsive 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#m1724804Matthias Scharwiesmscharwies@selfhtml.org2018-06-15T13:21:51Z2018-06-15T14:04:19ZResponsive 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#m1724790J o2018-06-15T10:36:16Z2018-06-15T10:36:16ZResponsive 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#m1724788Gunnar W.2018-06-15T10:31:35Z2018-06-15T10:31:35ZResponsive 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#m1724803marctrixself@mhis.dehttps://www.mhis.de2018-06-15T13:21:33Z2018-06-15T13:21:33ZResponsive 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#m1724797Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-06-15T11:57:29Z2018-06-15T11:57:29ZResponsive 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#m1724802marctrixself@mhis.dehttps://www.mhis.de2018-06-15T13:17:43Z2018-06-15T13:17:43ZResponsive 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#m1724812Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-06-15T13:59:06Z2018-06-15T13:59:06ZResponsive 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#m1724814Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-06-15T14:05:42Z2018-06-15T14:05:42ZResponsive 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#m1724817marctrixself@mhis.dehttps://www.mhis.de2018-06-15T14:26:09Z2018-06-15T14:26:09ZResponsive 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#m1724820Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-06-15T14:40:57Z2018-06-15T14:40:57ZResponsive 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#m1724825marctrixself@mhis.dehttps://www.mhis.de2018-06-15T15:04:11Z2018-06-15T15:04:54ZResponsive 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#m1724831beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-06-15T15:32:53Z2018-06-15T15:32:53ZResponsive 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#m1724832Matthias Scharwiesmscharwies@selfhtml.org2018-06-15T15:35:53Z2018-06-15T15:46:12ZResponsive 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#m1724833Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-06-15T15:49:32Z2018-06-15T15:49:32ZResponsive 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#m1724839Gunnar W.2018-06-15T17:20:43Z2018-06-15T17:20:43ZResponsive 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#m1724841Matthias Scharwiesmscharwies@selfhtml.org2018-06-15T17:24:25Z2018-06-15T17:24:25ZResponsive 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>