nicht angemeldet michaah
Matthias Scharwies
michaah
Gunnar Bittersmann
michaah
Der Martin
michaah
Matthias Apsel
Rolf B
Hi.
Ich dachte das geht, aber zumindest meine Kalkulation läuft ins Leere:
Bei 30em Viewport-Breite soll die rechte Spalte "1fr" breit sein, die linke 5em (das klappt mit der entsprechenden @media-query).
Bei 50em Viewport-Breite soll die rechte Spalte "1fr" breit sein, die linke 15em (das klappt mit der entsprechenden @media-query).
Schön wäre es ich könnte die beiden Spalten schrittweise auseinander ziehen (Die linke hat Text, der mit overflow: visible; in die rechte Spalte ragt). Mit einzelnen @media-queries könnte ich das natürlich erreichen, aber eigentlich hat man dazu doch calc().
Nur bekomme ich das nicht hin:
grid: ... / calc(((vw-30em)*0.5)+5em) 1fr;
Pro 2em Zunahme des VP in der Breite soll die linke Spalte um 1em breiter werden? Der Basiswert ist eben "5em" bei 30em Breite. Unter 30em und über 50em greifen andere Settings.
/5em 1fr; und /15em 1fr; funktionieren jeweils mit den sonstigen Definitionen, es muß die Berechnung sein, die klemmt.
Sind das zu viele Klammern? Ginge das anders?
Gruß
M
Servus!
Hi.
Ich dachte das geht, aber zumindest meine Kalkulation läuft ins Leere:
Bei 30em Viewport-Breite soll die rechte Spalte "1fr" breit sein, die linke 5em (das klappt mit der entsprechenden @media-query).
Bei 50em Viewport-Breite soll die rechte Spalte "1fr" breit sein, die linke 15em (das klappt mit der entsprechenden @media-query).
Schön wäre es ich könnte die beiden Spalten schrittweise auseinander ziehen (Die linke hat Text, der mit overflow: visible; in die rechte Spalte ragt). Mit einzelnen @media-queries könnte ich das natürlich erreichen, aber eigentlich hat man dazu doch calc().
Nur bekomme ich das nicht hin:
grid: ... / calc(((vw-30em)*0.5)+5em) 1fr;
Sind das zu viele Klammern? Ginge das anders?
SELF-Wiki: CSS/Wertetypen/Funktionen#Berechnungen_-_Die_calc-Funktion
Beachten Sie: Plus- und Minuszeichen müssen von Leerzeichen umschlossen werden.
Herzliche Grüße
Matthias Scharwies
Servus!
Hi. ... Nur bekomme ich das nicht hin:
grid: ... / calc(((vw-30em)*0.5)+5em) 1fr;
Beachten Sie: Plus- und Minuszeichen müssen von Leerzeichen umschlossen werden.
Ups, das habe ich bei der Durchsicht des Artikels geflissentlich überlesen. Danke soweit ... nur klappt das immer noch nicht. Das wirkt so als käme die Berechnung
/ calc(((vw - 30em) * 0.5) + 5em) 1fr;
(habe es mit und ohne Leerzeichen auch um das "*" versucht)
gar nicht an, die linke Spalte ändert ihre Größe überhaupt nicht wie es im Gegensatz dazu bei der Verwendung fester Werte geschieht.
Eben stelle ich allerdings fest dass
/ calc(((100% - 30em) * 0.5) + 5em) 1fr;
funktioniert, nicht wie ich will, aber immerhin ändert sich die Breite der betreffenden Spalte. Mich würde brennend interessieren, worauf sich "100%" bezieht. Meiner Ansicht nach, aber da gebe ich in diesem Zusammenhang selber nicht so viel drauf, indirekt auf den viewport, denn das grid Elternelement ist "main" und das erbt die viewport-Breite. Aber das was dann als Breite tatsächlich dabei herauskommt hat damit wenig zu tun.
Nun habe ich - zugegebenermaßen - damit herumgespielt und erhalte mit
/ calc(((130% - 30em) * 1) + 5em) 1fr;
ein besseres Ergebnis als ich mir mit meiner Ausgangsformel vorgestellt hatte (das * 1 habe ich nur aus Vergleichsgründen gelassen weil ich ja auch damit rumgespielt hatte und darüber das letzte Wort noch nicht gesprochen ist ;-), ist rechnerisch natürlich überflüssig ). Aber ich verstehe die Zusammenhänge nicht ansatzweise, bzw, warum das so funktioniert wie es funktioniert und warum der erste Ansatz wirkungslos bleibt.
Das ist jetzt also weniger ein Problem als eine Kuriosität.
Versuch macht eben nich immer kluch, aber läßt den blinden Hahn auch mal ein Korn finden ...
@@michaah
calc(((vw-30em)*0.5)+5em)Sind das zu viele Klammern?
Ja.
Und zu wenige Leerzeichen, wie Matthias schon sagte.
Und außerdem fehlt vor vw eine Zahl. Sollte wohl 💯 sein:
calc(((100vw - 30em) * 0.5) + 5em)
Ginge das anders?
Punktrechnung geht vor Strichrechnung, d.h. ein Klammernpaar brauchst du nicht: das um die Multiplikation.
Klammern auflösen:
(100vw − 30em) × ½ + 5em = 50vw − 15em + 5em = 50vw – 10em
Mal schnell die halbe Viewportbreite (15em bzw. 25em) eingesetzt und du siehst, dass genau das rauskommt, was du haben willst.
😷 LLAP
@@Gunnar
Danke für deine genaue Aufschlüsselung.
Und außerdem fehlt vor
vweine Zahl. Sollte wohl 💯 sein:
Ja, und deren Fehlen hat wohl verhindert, das überhaupt eine Breite berechnet wurde (siehe auch andere Antwort).
Punktrechnung geht vor Strichrechnung, ...
Soweit war das schon klar, nur im Eifer des Gefechts ...
...
Mal schnell die halbe Viewportbreite (15em bzw. 25em) eingesetzt und du siehst, dass genau das rauskommt, was du haben willst.
Jain:
Weil das ganz anders aussieht, was die Breite betrifft, als was ich erwarte, bzw. was herauskommt wenn ich den Wert händisch fix eingebe.
Ich vermute fast, und optisch würde das passen, dass bei der Berechnung eine Zahl herauskommt (15), ich gerne möchte dass die "em" als Einheit hat, calc aber (wg 100vh???) daraus "%" macht??? Jedenfalls stimmt an diese Ecke die Berechnung nicht.
Hallo,
Ich vermute fast, und optisch würde das passen, dass bei der Berechnung eine Zahl herauskommt (15), ich gerne möchte dass die "em" als Einheit hat, calc aber (wg 100vh???) daraus "%" macht??? Jedenfalls stimmt an diese Ecke die Berechnung nicht.
das mag sein, aber deine Erklärung führt trotzdem in die Irre. Denn calc() akzeptiert wohl Beiträge in vielen unterschiedlichen Einheiten, normiert sie aber alle auf "einen Nenner". Ob das Ergebnis dann in vw, in %, in em oder gar in px rauskommt, muss dich gar nicht jucken.
Live long and pros healthy,
Martin
... Denn calc() akzeptiert wohl Beiträge in vielen unterschiedlichen Einheiten,
Das war klar
normiert sie aber alle auf "einen Nenner". Ob das Ergebnis dann in vw, in %, in em oder gar in px rauskommt,
die Einheit ist mir auch piepegal
muss dich gar nicht jucken.
Wenn das Ergebnis bei 50em Breite zum Schluß etwas anderes ist als 15em, dann schon. Bei 800px habe ich 50em, das Rechenergebnis ist dann 15, was knapp einen drittel entspricht. Die Breite der Spalte ist tatsächlich jedoch knapp 1/6 ... und es sieht ganz anders aus als wenn ich die Spalten händisch /15em 1fr; definiere. Das sollte es wohl nicht. Insofern juckt es ...
Hallo michaah,
Ich vermute fast, und optisch würde das passen, dass bei der Berechnung eine Zahl herauskommt (15), ich gerne möchte dass die "em" als Einheit hat, calc aber (wg 100vh???) daraus "%" macht??? Jedenfalls stimmt an diese Ecke die Berechnung nicht.
Eine Zahl hat keine Einheit.
calc liefert ein Ergebnis, das man sich in den Entwicklertools anschauen kann. Dort werden die berechneten Werte in px angegeben. Alles andere ergibt wenig Sinn.
Bis demnächst
Matthias
calcliefert ein Ergebnis, das man sich in den Entwicklertools anschauen kann. Dort werden die berechneten Werte in px angegeben. Alles andere ergibt wenig Sinn.
Bei 800px viewportbreite ist diese Spalte 126px breit, das ist 0,15 mal 800px.
15em von 50em ist 0,3 mal soviel.
Hallo michaah,
Bei 800px viewportbreite ist diese Spalte 126px breit,
Also:
126px = 50vw - 10em
126px = 400px - 10em
-274px = -10em
1em = 27,4px
Das kann ich mir für eine Darstellung am Handy durchaus vorstellen.
Bis demnächst
Matthias
Hallo michaah,
Du solltest mal die font-size im Grid anschauen. Ich würde unterstellen, dass in der media Query 1em=1rem ist, aber wenn das Grid eine andere Schrift oder Schriftgröße hat als das Dokument, dann weicht die Berechnungsgrundlage ab.
Probiere mal, media und Spaltenbreite in rem zu rechnen.
Rolf