tag:forum.selfhtml.org,2005:/self physische maße zur definition von breakpoints in mediaqueries?! – SELFHTML-Forum 2017-04-24T06:36:00Z https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688818#m1688818 BerlinerTourGuide mail@berlinertourguide.com 2017-03-04T13:48:19Z 2017-03-04T13:48:19Z physische maße zur definition von breakpoints in mediaqueries?! <p>== welche maßangaben sind bei media-queries und zur defintion von breakpoints erlaubt und funktionieren in der praxis? ==</p> <p>im artikel zu CSS/Media Queries heißt es zu der frage, welche maßangaben (besser als "längenangaben", denn man fragt mit width die breite ab...!) man verwenden kann: "abgefragter Wert: Eine positive Längenangabe". ergibt sich die frage, welche einheiten hier zulässig sind und in der praxis funktionieren: mm, cm, inch, ...? bitte hierzu entsprechende angaben anfügen!</p> <p>hintergrund meiner frage: erstaunlicherweise wird einem in aktuellen lehrbüchern und tutorials zum thema immer wieder beigebracht, dass man bei medienabfragen die pixel-maße des viewports für die breakpoints zugrunde legen solle... da werden dann in in büchern aus dem jahre 2015 (z.b. "Flexible Boxes", Peter Müller) für "viele ''Smart''phones" pixel-maße von "320 x 480 px" angegeben... das ist - soweit ich sehe - (2017 bereits) ein völlig unrealistisches vorgehen: galaxy s7 bietet 1.440 px, sony xperia 1.080 px in der breite...! m.a.w.: man kann auf diesen screens bilder, die man für große pc-bildschirme (mit 72 dpi) bemessen hat, ohne weiteres mit voller brillianz auf einem hochkant gehaltenen, modernen smartphone wiedergeben... nur: text sollte dann nicht in 4 spalten laufen, sondern in einer spalte!!! denn die buchstaben müssen eine bestimmte mindestgröße in einem physischen maß (inch, mm, cm, pica, ...) haben, um bequem lesbar zu sein! also sollte man für die breakpoints die breite des mediums in mm oder inch abfragen, um zu entscheiden: wieviele spalten will ich anzeigen (und die schrift sollte man immer mit einer mindest-größe in einem physischen maß definieren!). wer sich dann noch bemühen will, bilder in reduzierten pixelmaßen für altertümliche medien auszuliefern, die so geringe dpi-werte haben, dass eine pixel-breite vom 320 px des viewports entsteht, der kann in einem zweiten schritt die pixel-dichte abfragen und ggf. für ein solches medium dann abgespeckte bilder ausliefern (zwecks schnellerem download)... aber derartige 'medien' dürften recht schnell der vergangenheit angehören, wogegen man mit pixeldichten von 576 dpi (s7 vs. 72 dpi an großen windows-bildschirmen) bald ausschließlich zu tun haben wird... nun gut, vielleicht kommen verstärkt 'weareables', wie armbanduhren mit mini-screens hinzu... und auch da sollte die schriftgröße physisch bemessen werden!</p> <p>bitte um kommentar! --[[Benutzer:Hahawe|Hahawe]] ([[Benutzer Diskussion:Hahawe|Diskussion]]) 14:08, 4. Mär. 2017 (CET) bzw. BerlinerTourGuide</p> <p>ps: die tag-wahl funktioniert miserabel!!! computer friert z.t. total ein... man sollte tags selbst frei definieren können...</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688820#m1688820 Julius 2017-03-04T13:59:00Z 2017-03-04T13:59:00Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo BerlinerTourGuide,</p> <blockquote> <p>die tag-wahl funktioniert miserabel!!!</p> </blockquote> <p>Und du solltest an der <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bedienung" rel="nofollow noopener noreferrer">Formatierung deiner Beiträge</a> (Absätze einfügen) und deiner Rechtschreibung arbeiten, das kann man kaum lesen.</p> <blockquote> <p>computer friert z.t. total ein...</p> </blockquote> <p>Kann ich nicht bestätigen. (Ja, es ruckelt manchmal etwas, aber das hält sich im Rahmen.)</p> <blockquote> <p>man sollte tags selbst frei definieren können...</p> </blockquote> <p>Das können nur <a href="https://forum.selfhtml.org/badges/create_tag" rel="noopener noreferrer">Nutzer mit entsprechender Punktzahl</a>. Ist auch besser so, denn sonst wird das schnell unübersichtlich, weil man keine <em>relevanten</em> Tags findet.</p> <p>Gruß<br> Julius</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688823#m1688823 Matthias Scharwies mscharwies@selfhtml.org 2017-03-04T14:07:50Z 2017-03-04T14:07:50Z physische maße zur definition von breakpoints in mediaqueries?! <p>Servus!</p> <blockquote> <p>welche maßangaben sind bei media-queries und zur defintion von breakpoints erlaubt und funktionieren in der praxis?</p> <p>im artikel zu CSS/Media Queries heißt es zu der frage, welche maßangaben (besser als "längenangaben", denn man fragt mit width die breite ab...!) man verwenden kann: "abgefragter Wert: Eine positive Längenangabe". ergibt sich die frage, welche einheiten hier zulässig sind und in der praxis funktionieren: mm, cm, inch, ...? bitte hierzu entsprechende angaben anfügen!</p> </blockquote> <p>Alles geht, aber mm, cm und inch sind im Webdesign eher unüblich.</p> <blockquote> <p>hintergrund meiner frage: erstaunlicherweise wird einem in aktuellen lehrbüchern und tutorials zum thema immer wieder beigebracht, dass man bei medienabfragen die pixel-maße des viewports für die breakpoints zugrunde legen solle...</p> </blockquote> <p>Ja, das ist ja auch nicht falsch. Besser wäre aber eine Verwendung relativer Maße wie em oder rem, die sich auf die Schriftgröße beziehen. Damit würden sich alle deine weiteren Spekulationen erübrigen.</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/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688826#m1688826 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-03-04T14:27:48Z 2017-03-04T14:27:48Z physische maße zur definition von breakpoints in mediaqueries?! <p>@@BerlinerTourGuide</p> <blockquote> <p>ergibt sich die frage, welche einheiten hier zulässig sind und in der praxis funktionieren: mm, cm, inch, ...? bitte hierzu entsprechende angaben anfügen!</p> </blockquote> <p>Bitteschön: <a href="https://forum.selfhtml.org/self/2016/sep/7/das-wtf-zur-wochenmitte-simple-css-media-queries-generator/1675022#m1675022" rel="noopener noreferrer">entsprechende Angaben</a></p> <p>Wenn ein Artikel <code class="bad">px</code> in <em lang="en">media queries</em> verwendet: Browsertab schließen.</p> <p>Wenn das in einem Buch steht: führe dieses Buch dem Rohstoffkreislauf zu.</p> <blockquote> <p>da werden dann in in büchern aus dem jahre 2015 (z.b. "Flexible Boxes", Peter Müller) für "viele ''Smart''phones" pixel-maße von "320 x 480 px" angegeben... das ist - soweit ich sehe - (2017 bereits) ein völlig unrealistisches vorgehen: galaxy s7 bietet 1.440 px, sony xperia 1.080 px in der breite...!</p> </blockquote> <p>Du darfst hier nicht denken, dass CSS-Pixel und physikalische Pixel dasselbe wären. Mein 4er iPhone hat eine Größe von 320px × 480px (das sind CSS-Pixel), aber (da Retina-Display) in der Breite wie in der Höhe jeweils doppelt so viele physikalische Pixel (was für CSS irrelevant ist).</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688828#m1688828 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-03-04T14:43:31Z 2017-03-04T14:43:31Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo BerlinerTourGuide,</p> <blockquote> <p>im artikel zu CSS/Media Queries heißt es zu der frage, welche maßangaben (besser als "längenangaben", denn man fragt mit width die breite ab...!)</p> </blockquote> <p>Maßangaben können auch Winkel, Flächen, Temperaturen, … sein</p> <p>Alles, was als Einheit Meter erhält, ist eine Länge. Unabhängig davon, ob es als Breite, Höhe, Tiefe, Länge, Strecke, Weg oder Abstand bezeichnet wird.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688874#m1688874 BerlinerTourGuide 2017-03-04T22:53:24Z 2017-03-04T22:53:24Z physische maße zur definition von breakpoints in mediaqueries?! <blockquote> <p>man sollte tags selbst frei definieren können...</p> <p>Das können nur Nutzer mit entsprechender Punktzahl. Ist auch besser so, denn sonst wird das schnell unübersichtlich, weil man keine relevanten Tags findet.</p> </blockquote> <p>hallo julius! (bzgl. kleinschreibung s.u. kommentar an matthias!) was die tags betrifft, bin ich nicht deiner ansicht. es ist wichtig, dass verschlagwortet wird, was die leute suchen, womit sie sich beschäftigen, bzw. dass das gefunden wird, was die leute suchen, und zwar grade das, was die anfänger suchen, nicht die fachblinden eh-schon-alles-wisser…</p> <p>schönen gruß! BerlinerTourGuide</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688852#m1688852 BerlinerTourGuide 2017-03-04T17:47:13Z 2017-03-04T17:47:13Z physische maße zur definition von breakpoints in mediaqueries?! <blockquote> <p>Du darfst hier nicht denken, dass CSS-Pixel und physikalische Pixel dasselbe wären. Mein 4er iPhone hat eine Größe von 320px × 480px (das sind CSS-Pixel), aber (da Retina-Display) in der Breite wie in der Höhe jeweils doppelt so viele physikalische Pixel (was für CSS irrelevant ist).</p> </blockquote> <p>o.k., danke LLAP, das hab ich inzwischen auch gelernt... das sony xperia hat eine dpr von 3, also ein 'altes' css-pixel wird <em>theoretisch</em> mit 3 pyhsischen pixeln dargestellt, d.h. es würde mit 1080 px in der breite ein bild von 360 'klassischen' pixeln über die volle screen-breite dargestellt... wozu ist ist dann die höhere bildschirmauflösung eigentlich gut? nur zur textdarstellung?</p> <p><em>in wirklichkeit</em> verhalten sich die dinge etwas anders: wenn ich ein test-jpg von 360 x 360 px hochlade, wird dieses auf meinem xperia NICHT über die volle breite dargestellt, sondern in etwa auf einem drittel der breite, allerdings - unlogischerweise - nicht auf extakt einem drittel: es nimmt etwa 23 mm ein (zentriert), während die freien bereiche daneben je 20 mm einnehmen... schwenke ich das gerät auf querformat, wird das bild VERGRÖßERT ebenfalls auf etwas mehr als einem drittel der breite dargestellt, nimmt aber jetzt 38 mm ein…</p> <p>lade ich ein bild hoch, das 72 x 72 pixel groß ist, also auf einem bildschirm mit 72 dpi genau ein inch bzw. 2,54 cm breit sein sollte, dann sehe ich dieses im querformat mit einer größe von ca. 8 mm dargestellt, d.h. etwa einem drittel von einem inch... ergo wird das bild in etwa mit einer dpr von 1:1 gezeigt. im hochformat ist das bild nur noch knapp 5 mm groß... lade ich ein drei mal so großes bild hoch, also 216 x 216 px, dann wird dies im querformat ca. 23 mm breit dargestellt, also mit einer dpr von etwas weniger als 1:3 (denn sonst müsste es 25,4 mm bzw. 1 inch messen)...</p> <p>lade ich ein bild mit 1080 px kantenmaß hoch, also genau mit der device-pixel-breite des xperia, wird dieses in etwa auf der vollen screenbreite dargestellt (mit einem winzigen rand links, sodass man minimal scrollen kann). das gleiche ergebnis im querformat.</p> <p>ergo: xperia zumindest hat unterschiedliche dpr-raten im hoch- und im querformat... die generelle meldung etwa von www.devicepixelratio.com, dass mein xperia eine dpr von 3 hätte, ist also falsch, oder?</p> <p>und m.a.w.: moderne smartphones benutzen durchaus die vorhandenen physischen pixel, um ein bild brillianter darzustellen... man muss also bilder mit deutlich mehr pixeln hochladen, wenn man will, dass diese mit der gleichen physischen größe dargestellt werden, wie auf einem computer-screen mit 72 dpi und einer dpr von 1:1... richtig???</p> <p>bleibt die frage: was würde die media-query für einen pixel-wert für die breite meines xperia liefern? kämen 360 px, müsste ich trotzdem ein bild von 1080 px breite hochladen, wenn dieses die volle screen-breite einnehmen soll. ein test mit</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>360px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>ergibt, dass der body im hochformat gelb gefärbt wird, im querformat aber weiß bleibt... m.a.w.: die media-query liefert das ergebnis, dass der screen <= 360 px breit ist (richtig?)... trotzdem müssen die bilder, die ich hochlade, um den screen in voller breite zu füllen, 1.080 px breit sein die schrift 36 px oder mehr hoch sein... besser also, ich definiere die schriftgröße in einem physischen maß, z.b. mm (egal ob nun die basis-bezugsschrift, um dann "em" zu verwenden, oder jede einzelne...); dann geht nix schief...</p> <p>die schrift sollte dabei tunlichst nicht die am pc-screen möglichen 12 px groß sein - diese 12-px-schrift ist am händi im hochformat WINZIG -, sondern in etwa 3 mal so groß, also 36 px; das kann mensch noch einigermaßen gut lesen (weil gestochen scharf, obgleich nur ca. 2 mm groß [großbuchstaben])... und weiter sollte der text nun keinesfalls auch noch in 2 spalten geführt werden, sondern nur noch in einer…</p> <p>und, was sagen die fachleute zu meinen beobachtungen...? beste jrüße aus baalin! BerlinerTourGuide</p> <p>ps: an all dem ändert auch <meta name="viewport" content="width=device-width, initial-scale=1.0"> nichts...</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688875#m1688875 BerlinerTourGuide 2017-03-04T23:25:41Z 2017-03-04T23:25:41Z physische maße zur definition von breakpoints in mediaqueries?! <p>nun, eben nicht... genau betrachtet jedenfalls. schluren kann jeder. lies nach unter https://de.wikipedia.org/wiki/Meter : maß kommt von griech. métron (länge heißt mäkos oder makrótäs); man spricht von längenmaß, breitenmaß und höhenmaß... das ist nicht pleonastisch; maß bleibt gleich, länge, breite und höhe variieren. maß, im sinne von größe, fällt nur dann gewissermaßen (!) mit länge zusammen, wenn lediglich eine strecke (eindimensional!) gemessen wird... das maß ist eine metrische einheit, die sowohl auf länge, wie breite und höhe bezogen werden kann (natürlich auch noch auf mehr, kreisumfang [ein kreis ist nicht 50 mm lang, sondern hat einen umfang von 50 mm...] usw. ...); maß und länge, breite bzw. höhe sind v.a. dann zu unterscheiden, wenn - genau besehen - nicht von individuellen maßen, sondern von maßeinheiten - wie hier - die rede ist: mm, cm, m, punkt, pica... längen, breiten, höhen sind individuell und unterscheiden von fall zu fall; die maße, genauer: maßeinheiten bleiben immer dieselben… mit maßeinheiten misst man sowohl längen, als auch breiten, als auch höhen... mensch misst nicht breiten mit längen…</p> <p>aber nicht jeder nimmt's so genau mit der sprache und der logik; sonst käme es nicht zu formulierungen wie dieser: "Wenn für ein Element die Schriftgröße durch eine em-Angabe definiert wird..." mensch "definiert" die "Schriftgröße" eines rahmenelements, wenn er/sie/es die breite, genauer stärke des rahmens in em angibt??? der satz muss natürlich lauten: "Wenn für ein Element (z.b. Schrift, Zeilenhöhe, Strichstärke, Boxgröße, ...) die Größe durch eine em-Angabe definiert wird, ..." (vielleicht mit der hinzufügung: "wobei diese relativ zu einer zugrundeliegenden Schriftgröße festgelegt wird,...")</p> <p>wie lautet das selfhtml-motto so schön: "die energie des verstehens..." ;-) hahawe</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688857#m1688857 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-03-04T18:43:57Z 2017-03-04T18:43:57Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo BerlinerTourGuide,</p> <blockquote> <p>und, was sagen die fachleute zu meinen beobachtungen...?</p> </blockquote> <ul> <li>dass bestimmte Wörter im deutschen mit großen Anfangsbuchstaben geschrieben werden</li> <li>dass es ist nicht sinnvoll ist, pixelgenaue Layouts haben zu wollen</li> </ul> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688862#m1688862 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-03-04T19:34:35Z 2017-03-04T19:34:35Z physische maße zur definition von breakpoints in mediaqueries?! <p>@@BerlinerTourGuide</p> <blockquote> <p>o.k., danke LLAP</p> </blockquote> <p>?? Mein Name steht über meinen Postings, nicht darunter.</p> <p>LLAP ist der Gruß von <a href="https://twitter.com/TheRealNimoy/status/569762773204217857" rel="nofollow noopener noreferrer">ihm</a> (bzw. seiner Rolle): <em lang="en">live long and prosper</em>.</p> <blockquote> <p>ergo: xperia zumindest hat unterschiedliche dpr-raten im hoch- und im querformat... die generelle meldung etwa von www.devicepixelratio.com, dass mein xperia eine dpr von 3 hätte, ist also falsch, oder?</p> </blockquote> <p>Ich halte es für falsch, überhaupt Gedanken daran zu verschwenden. Wenn du <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder" rel="nofollow noopener noreferrer">hochauflösende Bilder ausliefern</a> willst, dann in HTML mit <code>srcset</code>-Attribut (bei <em lang="en">art direction</em> mit <code>picture</code>-Element). Für Hintergrundbilder in CSS gibt es <a href="https://wiki.selfhtml.org/wiki/Media_queries#resolution" rel="nofollow noopener noreferrer"><em lang="en">media query</em> <code>resolution</code></a>.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688865#m1688865 BerlinerTourGuide 2017-03-04T19:51:08Z 2017-03-04T19:51:08Z physische maße zur definition von breakpoints in mediaqueries?! <p>bzw.</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</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>361px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>ergibt, dass im hochformat nicht eingefärbt wird (weil der screen offensichtlich nur als 360 px breit gemeldet wird), wohl aber im querformat...</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688872#m1688872 BerlinerTourGuide 2017-03-04T22:47:16Z 2017-03-04T22:47:16Z physische maße zur definition von breakpoints in mediaqueries?! <p>(zunächst en passant zur 'rechtschreibung': wie heißt es so schön: "Formuliere höflich und wertschätzend." - um irgendwelche belehrenden kommentare - um sie hier diplomatisch weiter nicht zu qualifizieren - wurde nicht gebeten! [wer vielleicht ein wenig reflektieren möchte, lese hier: https://de.wikipedia.org/wiki/Kleinschreibung] es geht um die sache hier!)</p> <p>danke ansonsten für den kommentar. es geht allerdings nicht um "pixelgenaue layouts". es geht darum, dass in hochauflösenden screens moderner smartphones das Richtige dargestellt wird: d.h. bilder, die der möglichen physischen auflösung entsprechen, also deren möglichkeiten ausreizen (außer man will datenmenge sparen, was nicht jedermenschs ziel ist), und d.h. eine schrift, die ausreichend groß ist, um ohne anstrengung gelesen werden zu können. wir haben festgestellt: die media-query liefert 360 px breite, während 1.080 für brilliante bilder zur verfügung stehen. ferner: schrift in den üblichen pixelgrößen (ca. 16 px) wird unleserlich klein (weit unter ein mm). dagegen hilft auch nicht die definition in em, denn diese bezieht sich auf eine basis-größe, und das ist entweder die schriftgröße, die der browser standardmäßig vorgibt (16 px i.d.r.), oder die schriftgröße, die mensch für das body-tag per css definiert (bzw. kaskadierend die schriftgröße des jeweiligen eltern-elements). wer also mit em die schriftgröße kontrollieren will, muss eine basis-größe im body-tag setzen, wenn ich recht sehe, und diese dann für hochauflösende mobile-screens entsprechend hoch setzen, damit auf dem screen eine akzeptable physische größe erreicht wird (ca. das dreifache). leider hilft dagegen auch meine erste idee nicht, die schriftgröße mit einem physischen maß (z.b. mm) zu definieren, weil leider für die browser eines händis 1 mm an lineal nicht 1 mm auf dem screen ist; der browser rechnet sich also auch nur etwas zurecht, wobei logischerweise von pixeln ausgegangen wird. (da läuft wohl sowas wie: "72 pixel ergeben 25,4 mm bzw. ein inch, also sind 72/25,4 ein mm...") wüsste jemand eine bessere methode? schönen gruß! BerlinerTourGuide bzw. hahawe</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688869#m1688869 Tabellenkalk 2017-03-04T20:10:54Z 2017-03-04T20:10:54Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo,</p> <blockquote> <p>?? Mein Name steht über meinen Postings, nicht darunter.</p> </blockquote> <p>Da bist du aber hier nun auch eine Ausnahme. Die meisten beenden ihr Posting mit einem Gruß zusammen mit ihrem Namen…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688873#m1688873 BerlinerTourGuide 2017-03-04T22:49:21Z 2017-03-04T23:07:24Z physische maße zur definition von breakpoints in mediaqueries?! <p>hallo gunnar! sorry for den miss-nomer… bzgl. srcset beachte meinen beitrag hier: <a href="https://wiki.selfhtml.org/wiki/Diskussion:HTML/Tutorials/responsive_Bilder#ineffizienz_des_srcset-attributs..." rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/Diskussion:HTML/Tutorials/responsive_Bilder#ineffizienz_des_srcset-attributs…</a> danke! BerlinerTourGuide aka hahawe</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688876#m1688876 BerlinerTourGuide 2017-03-04T23:33:51Z 2017-03-04T23:33:51Z physische maße zur definition von breakpoints in mediaqueries?! <p>hallo gunnar,</p> <p>beachte bitte https://wiki.selfhtml.org/wiki/Diskussion:HTML/Tutorials/responsive_Bilder#ineffizienz_des_srcset-attributs... und das, was ich oben matthias geantwortet habe... danke.</p> <p>BTG</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688877#m1688877 BerlinerTourGuide 2017-03-05T00:53:34Z 2017-03-05T01:10:02Z physische maße zur definition von breakpoints in mediaqueries?! <p>noch eine beobachtung zur ergänzung:</p> <p>wenn man folgendes setzt:</p> <p><meta name="viewport" content="width=device-width, user-scalable=yes"></p> <pre><code class="block language-css"><span class="token selector"><style type="text/css" > body</span> <span class="token punctuation">{</span><span class="token property">margin</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token comment">/*font-size:4.2mm;*/</span> <span class="token comment">/*entspricht der standardgröße von 16px, und wäre nur mit lupe lesbar...*/</span> <span class="token property">line-height</span><span class="token punctuation">:</span>1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.textclass01</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>1em<span class="token punctuation">}</span> <span class="token selector">img</span> <span class="token punctuation">{</span><span class="token property">margin</span><span class="token punctuation">:</span>0px 360px 0px 360px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/**/</span> </style> </code></pre> <p>dann ist ein bild mit 360 x 360 px genau so breit wie die beiden margins zu 360 px, nämlich ca. 21 mm; die 3 'spalten' füllen dann exakt die screenbreite von 1.080 physischen pixeln aus (während die screen-breite, die die media-query ergibt, 360 px ist...); ebenso ein bild mit 1.080 px breite (nun nicht mehr scrollbar; s. body-styling). die schrift mit einer größe von 1 em ist bei einer basis-größe von 48 px angenehm lesbar (ca. 2,5 mm hoch [nicht lang, werter matthias...]); 36 px gehen auch noch...</p> <p>mit diesen (bzw. ähnlichen) rahmenbedingungen ist also in der praxis ein graphisch optimales lay-out für moderne smart-phones zu erstellen...</p> <p>BTG</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688889#m1688889 Tabellenkalk 2017-03-05T08:09:47Z 2017-03-05T08:09:47Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo,</p> <blockquote> <p>wer vielleicht ein wenig reflektieren möchte, lese hier: https://de.wikipedia.org/wiki/Kleinschreibung] es geht um die sache hier!)</p> </blockquote> <p>Da lese ich:</p> <blockquote> <p>Gegen die Kleinschreibung wird eingewendet, dass sie den Lesefluss störe. Die markanten Großbuchstaben seien dem Auge bei der Orientierung im Text behilflich. Auch erleichtere die Großschreibung der Substantive das Querlesen, da diese für das Verständnis des Textes besonders bedeutsam seien und durch die Hervorhebung schneller erfasst würden.</p> </blockquote> <p>Und genau darum geht es. Du als Hilfesuchender willst doch den potentiell Helfenden keine Hindernisse in den Weg legen. Mit konsequenter Kleinschreibung tust du aber genau das.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688911#m1688911 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-03-05T10:30:24Z 2017-03-05T10:30:24Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo BerlinerTourGuide,</p> <blockquote> <p>um irgendwelche belehrenden kommentare - um sie hier diplomatisch weiter nicht zu qualifizieren - wurde nicht gebeten!</p> </blockquote> <p>Wenn du eine Frage in einem öffentlichen Raum stellst, musst du damit rechnen, auch solche Kommentare zu erhalten.</p> <p>Deine konsequente Kleinschreibung macht deinen Beitrag schlecht lesbar.</p> <blockquote> <p>media-query liefert 360 px breite, […] 1.080 [px] […] in den üblichen pixelgrößen (ca. 16 px) wird unleserlich klein (weit unter ein mm). dagegen hilft auch nicht die definition in em, denn diese bezieht sich auf eine basis-größe, und das ist entweder die schriftgröße, die der browser standardmäßig vorgibt (16 px i.d.r.),</p> </blockquote> <blockquote> <p>"72 pixel ergeben 25,4 mm bzw. ein inch, also sind 72/25,4 ein mm...") wüsste jemand eine bessere methode?</p> </blockquote> <p>Ja. Verabschiede dich von dem Gedanken, ein pixelgenaues Layout erstellen zu wollen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688912#m1688912 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-03-05T10:32:35Z 2017-03-05T10:32:35Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo BerlinerTourGuide,</p> <blockquote> <p>bzgl. srcset beachte meinen beitrag hier: <a href="https://wiki.selfhtml.org/wiki/Diskussion:HTML/Tutorials/responsive_Bilder#ineffizienz_des_srcset-attributs..." rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/Diskussion:HTML/Tutorials/responsive_Bilder#ineffizienz_des_srcset-attributs…</a></p> </blockquote> <p>Bitte die Diskussion nicht auf mehrere Stellen verteilen, die Diskussionsseiten im Wiki sind nicht für die fachliche Diskussion gedacht.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688940#m1688940 Julius 2017-03-05T14:15:11Z 2017-03-05T14:17:37Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo BerlinerTourGuide,</p> <blockquote> <p>(bzgl. kleinschreibung s.u. kommentar an matthias!)</p> </blockquote> <p>Da schließe ich mich <a href="https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688889#m1688889" rel="noopener noreferrer">Tabellenkalks Antwort darauf</a> an. Ich denke, wir haben alle in ausreichendem Maße unsere jeweiligen Meinungen dargelegt.</p> <blockquote> <p>was die tags betrifft, bin ich nicht deiner ansicht. es ist wichtig, dass verschlagwortet wird, was die leute suchen, womit sie sich beschäftigen, bzw. dass das gefunden wird, was die leute suchen, und zwar grade das, was die anfänger suchen, nicht die fachblinden eh-schon-alles-wisser…</p> </blockquote> <p>Ich glaube, dass du nicht ganz verstehst, wie die Tags hier funktionieren:<br> In <a href="http://webkompetenz.wikidot.com/selfhtml:foren-und-boards" rel="nofollow noopener noreferrer">Boards</a> gibt es Unterforen zu bestimmten Themen, hier gab es früher in der alten Forums-Software sogenannte <a href="https://web.archive.org/web/20140212125443/http://forum.de.selfhtml.org/cgi-bin/fo_post" rel="nofollow noopener noreferrer">Themenbereiche</a>, nach denen man übrigens auch filtern konnte. Das Problem ist dabei natürlich, dass du nur einen Themenbereich auswählen kannst, es aber oft Themen gibt, die sich nicht eindeutig zuordnen lassen. Daher kannst du in diesem Forum deinen Beitrag mehreren Themenbereichen alias „Tags“ zuordnen. Nach diesen Tags kannst du übrigens auch <a href="https://forum.selfhtml.org/self/tags/" rel="noopener noreferrer">filtern</a>.</p> <p>Bei den Tags geht es auch gar nicht um Verschlagwortung, sondern um Kategorisierung. Damit kannst du dann die Suche füttern: <a href="https://forum.selfhtml.org/search?utf8=%E2%9C%93&term=tag%3Acss+ma%C3%9Feinheiten&sections%5B%5D=1&start_date%5Bday%5D=5&start_date%5Bmonth%5D=3&start_date%5Byear%5D=2013&stop_date%5Bday%5D=5&stop_date%5Bmonth%5D=3&stop_date%5Byear%5D=2017&order=rank#results" rel="noopener noreferrer">tag:css maßeinheiten</a> – das Schlagwort bestimmst folglich du als Suchender!</p> <p>Gruß<br> Julius</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688878#m1688878 BerlinerTourGuide 2017-03-05T00:55:03Z 2017-03-05T00:57:06Z physische maße zur definition von breakpoints in mediaqueries?! <p>schrift z.b. ist definitiv nicht - z.b. - 3 mm lang, sondern hoch... (woran man sieht, dass mm nur in bestimmten fällen eine länge messen...)</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688879#m1688879 BerlinerTourGuide 2017-03-05T01:02:18Z 2017-03-05T01:02:18Z physische maße zur definition von breakpoints in mediaqueries?! <blockquote> <p>Alles, was als Einheit Meter erhält, ist eine Länge.</p> </blockquote> <p>"Alles, was als Einheit Meter erhält, ist ein Streckenmaß oder Abstandsmaß oder räumliches Größenmaß." - so wär's richtig imho...</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1688880#m1688880 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-03-05T01:16:07Z 2017-03-05T01:18:36Z physische maße zur definition von breakpoints in mediaqueries?! <p>@@BerlinerTourGuide</p> <blockquote> <blockquote> <p>Alles, was als Einheit Meter erhält, ist eine Länge.</p> </blockquote> <p>"Alles, was als Einheit Meter erhält, ist ein Streckenmaß oder Abstandsmaß oder räumliches Größenmaß." - so wär's richtig imho...</p> </blockquote> <p>„Die Länge ist eine physikalische Größe. Sie bezeichnet die Ausdehnung physikalischer Objekte und deren Abstände zueinander.“ [<a href="https://de.wikipedia.org/wiki/L%C3%A4nge_(Physik)" rel="nofollow noopener noreferrer">Wikipedia</a>]</p> <p>Die Ausdehnung eines Körpers in der Breite ist eine Länge.</p> <p>Der Abstand zwischen zwei Körpern ist eine Länge.</p> <p>Hingegen: Die Länge eines Musikstücks ist keine Länge, sondern eine Zeitdauer.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1690276#m1690276 BerlinerTourGuide 2017-03-18T10:03:47Z 2017-03-18T10:03:47Z physische maße zur definition von breakpoints in mediaqueries?! <p>wer das thema "länge" und die von mir vorgeschlagene differenziertere ausdrucksweise nicht verstehen will, der wird's nicht verstehen... für die Willigen und Interessierten: er/sie/es lese den englischen wiki-artikel https://en.wikipedia.org/wiki/Length - der ist da wenigstens etwas differenzierter... zu mehr hab ich leider keine zeit... BTG</p> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1690278#m1690278 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-03-18T10:10:01Z 2017-03-18T10:10:01Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo BerlinerTourGuide,</p> <blockquote> <p>wer das thema "länge" und die von mir vorgeschlagene differenziertere ausdrucksweise nicht verstehen will, der wird's nicht verstehen...</p> </blockquote> <p>Das hat nichts mit verstehen wollen zu tun, sondern mit korrekter Verwendung der Fachsprache.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/mar/4/physische-masse-zur-definition-von-breakpoints-in-mediaqueries/1692815#m1692815 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-04-24T06:36:00Z 2017-04-24T06:36:00Z physische maße zur definition von breakpoints in mediaqueries?! <p>Hallo Matthias Apsel,</p> <blockquote> <blockquote> <p>wer das thema "länge" und die von mir vorgeschlagene differenziertere ausdrucksweise nicht verstehen will, der wird's nicht verstehen...</p> </blockquote> <p>Das hat nichts mit verstehen wollen zu tun, sondern mit korrekter Verwendung der Fachsprache.</p> </blockquote> <p>Passend dazu: Der Wikipedia−Artikel <a href="https://de.wikipedia.org/wiki/Physikalische_Gr%C3%B6%C3%9Fe" rel="nofollow noopener noreferrer">Physikalische Größe</a> ist heute (24.4.2017) Artikel des Tages.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div>