physische maße zur definition von breakpoints in mediaqueries?!
BerlinerTourGuide
- css
== welche maßangaben sind bei media-queries und zur defintion von breakpoints erlaubt und funktionieren in der praxis? ==
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!
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!
bitte um kommentar! --[[Benutzer:Hahawe|Hahawe]] ([[Benutzer Diskussion:Hahawe|Diskussion]]) 14:08, 4. Mär. 2017 (CET) bzw. BerlinerTourGuide
ps: die tag-wahl funktioniert miserabel!!! computer friert z.t. total ein... man sollte tags selbst frei definieren können...
Hallo BerlinerTourGuide,
die tag-wahl funktioniert miserabel!!!
Und du solltest an der Formatierung deiner Beiträge (Absätze einfügen) und deiner Rechtschreibung arbeiten, das kann man kaum lesen.
computer friert z.t. total ein...
Kann ich nicht bestätigen. (Ja, es ruckelt manchmal etwas, aber das hält sich im Rahmen.)
man sollte tags selbst frei definieren können...
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.
Gruß
Julius
man sollte tags selbst frei definieren können...
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.
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…
schönen gruß! BerlinerTourGuide
Hallo BerlinerTourGuide,
(bzgl. kleinschreibung s.u. kommentar an matthias!)
Da schließe ich mich Tabellenkalks Antwort darauf an. Ich denke, wir haben alle in ausreichendem Maße unsere jeweiligen Meinungen dargelegt.
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…
Ich glaube, dass du nicht ganz verstehst, wie die Tags hier funktionieren:
In Boards gibt es Unterforen zu bestimmten Themen, hier gab es früher in der alten Forums-Software sogenannte Themenbereiche, 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 filtern.
Bei den Tags geht es auch gar nicht um Verschlagwortung, sondern um Kategorisierung. Damit kannst du dann die Suche füttern: tag:css maßeinheiten – das Schlagwort bestimmst folglich du als Suchender!
Gruß
Julius
Servus!
welche maßangaben sind bei media-queries und zur defintion von breakpoints erlaubt und funktionieren in der praxis?
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!
Alles geht, aber mm, cm und inch sind im Webdesign eher unüblich.
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...
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.
Herzliche Grüße
Matthias Scharwies
@@BerlinerTourGuide
ergibt sich die frage, welche einheiten hier zulässig sind und in der praxis funktionieren: mm, cm, inch, ...? bitte hierzu entsprechende angaben anfügen!
Bitteschön: entsprechende Angaben
Wenn ein Artikel px
in media queries verwendet: Browsertab schließen.
Wenn das in einem Buch steht: führe dieses Buch dem Rohstoffkreislauf zu.
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...!
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).
LLAP 🖖
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).
o.k., danke LLAP, das hab ich inzwischen auch gelernt... das sony xperia hat eine dpr von 3, also ein 'altes' css-pixel wird theoretisch 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?
in wirklichkeit 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…
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)...
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.
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?
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???
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
@media screen and (max-width:360px) {
body {background-color:yellow;}
}
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...
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…
und, was sagen die fachleute zu meinen beobachtungen...? beste jrüße aus baalin! BerlinerTourGuide
ps: an all dem ändert auch <meta name="viewport" content="width=device-width, initial-scale=1.0"> nichts...
Hallo BerlinerTourGuide,
und, was sagen die fachleute zu meinen beobachtungen...?
Bis demnächst
Matthias
(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!)
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
noch eine beobachtung zur ergänzung:
wenn man folgendes setzt:
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style type="text/css" >
body {margin:0px;
padding:0px;
font-size:48px;
/*font-size:4.2mm;*/ /*entspricht der standardgröße von 16px, und wäre nur mit lupe lesbar...*/
line-height:1em;
}
.textclass01{font-size:1em}
img {margin:0px 360px 0px 360px;} /**/
</style>
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...
mit diesen (bzw. ähnlichen) rahmenbedingungen ist also in der praxis ein graphisch optimales lay-out für moderne smart-phones zu erstellen...
BTG
Hallo,
wer vielleicht ein wenig reflektieren möchte, lese hier: https://de.wikipedia.org/wiki/Kleinschreibung] es geht um die sache hier!)
Da lese ich:
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.
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.
Gruß
Kalk
Hallo BerlinerTourGuide,
um irgendwelche belehrenden kommentare - um sie hier diplomatisch weiter nicht zu qualifizieren - wurde nicht gebeten!
Wenn du eine Frage in einem öffentlichen Raum stellst, musst du damit rechnen, auch solche Kommentare zu erhalten.
Deine konsequente Kleinschreibung macht deinen Beitrag schlecht lesbar.
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.),
"72 pixel ergeben 25,4 mm bzw. ein inch, also sind 72/25,4 ein mm...") wüsste jemand eine bessere methode?
Ja. Verabschiede dich von dem Gedanken, ein pixelgenaues Layout erstellen zu wollen.
Bis demnächst
Matthias
@@BerlinerTourGuide
o.k., danke LLAP
?? Mein Name steht über meinen Postings, nicht darunter.
LLAP ist der Gruß von ihm (bzw. seiner Rolle): live long and prosper.
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?
Ich halte es für falsch, überhaupt Gedanken daran zu verschwenden. Wenn du hochauflösende Bilder ausliefern willst, dann in HTML mit srcset
-Attribut (bei art direction mit picture
-Element). Für Hintergrundbilder in CSS gibt es media query resolution
.
LLAP 🖖
Hallo,
?? Mein Name steht über meinen Postings, nicht darunter.
Da bist du aber hier nun auch eine Ausnahme. Die meisten beenden ihr Posting mit einem Gruß zusammen mit ihrem Namen…
Gruß
Kalk
hallo gunnar! sorry for den miss-nomer… bzgl. srcset beachte meinen beitrag hier: https://wiki.selfhtml.org/wiki/Diskussion:HTML/Tutorials/responsive_Bilder#ineffizienz_des_srcset-attributs… danke! BerlinerTourGuide aka hahawe
Hallo BerlinerTourGuide,
bzgl. srcset beachte meinen beitrag hier: https://wiki.selfhtml.org/wiki/Diskussion:HTML/Tutorials/responsive_Bilder#ineffizienz_des_srcset-attributs…
Bitte die Diskussion nicht auf mehrere Stellen verteilen, die Diskussionsseiten im Wiki sind nicht für die fachliche Diskussion gedacht.
Bis demnächst
Matthias
hallo gunnar,
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.
BTG
bzw.
@media screen and (min-width:361px) {
body {background-color:yellow;}
}
ergibt, dass im hochformat nicht eingefärbt wird (weil der screen offensichtlich nur als 360 px breit gemeldet wird), wohl aber im querformat...
Hallo BerlinerTourGuide,
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...!)
Maßangaben können auch Winkel, Flächen, Temperaturen, … sein
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.
Bis demnächst
Matthias
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…
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,...")
wie lautet das selfhtml-motto so schön: "die energie des verstehens..." ;-) hahawe
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...)
Alles, was als Einheit Meter erhält, ist eine Länge.
"Alles, was als Einheit Meter erhält, ist ein Streckenmaß oder Abstandsmaß oder räumliches Größenmaß." - so wär's richtig imho...
@@BerlinerTourGuide
Alles, was als Einheit Meter erhält, ist eine Länge.
"Alles, was als Einheit Meter erhält, ist ein Streckenmaß oder Abstandsmaß oder räumliches Größenmaß." - so wär's richtig imho...
„Die Länge ist eine physikalische Größe. Sie bezeichnet die Ausdehnung physikalischer Objekte und deren Abstände zueinander.“ [Wikipedia]
Die Ausdehnung eines Körpers in der Breite ist eine Länge.
Der Abstand zwischen zwei Körpern ist eine Länge.
Hingegen: Die Länge eines Musikstücks ist keine Länge, sondern eine Zeitdauer.
LLAP 🖖
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
Hallo BerlinerTourGuide,
wer das thema "länge" und die von mir vorgeschlagene differenziertere ausdrucksweise nicht verstehen will, der wird's nicht verstehen...
Das hat nichts mit verstehen wollen zu tun, sondern mit korrekter Verwendung der Fachsprache.
Bis demnächst
Matthias
Hallo Matthias Apsel,
wer das thema "länge" und die von mir vorgeschlagene differenziertere ausdrucksweise nicht verstehen will, der wird's nicht verstehen...
Das hat nichts mit verstehen wollen zu tun, sondern mit korrekter Verwendung der Fachsprache.
Passend dazu: Der Wikipedia−Artikel Physikalische Größe ist heute (24.4.2017) Artikel des Tages.
Bis demnächst
Matthias