nicht angemeldet
Werte in Abhängigkiet von anderen Werten und "CSS-Variablen"
0 0
0 
suit
0
Werte in Abhängigkiet von anderen Werten und "CSS-Variablen"
Gunnar BittersmannHallo,
mein Wunsch-CSS sähe wie folgt aus:
var cssVar = 20px;
@media (max-width: 450px) {
.testclass1 {
height: cssVar * 2;
}
.testclass2 {
height: testclass1_height * 2.5;
}
}
@media (min-width: 451px) and (max-width: 800px) {
.testclass1 {
height: cssVar * 2.3;
}
.testclass2 {
height: testclass1_height * 2.8;
}
}
@media (min-width: 801px) {
.testclass1 {
height: cssVar * 3;
}
.testclass2 {
height: testclass1_height * 3.5;
}
}
Gibts dazu einen Ansatz? Eigenschaften in Abhängigkeit von anderen Eigenschaften zu definieren bzw. zu berechnen?
Viele Grüße
Siri
-
Gibts dazu einen Ansatz? Eigenschaften in Abhängigkeit von anderen Eigenschaften zu definieren bzw. zu berechnen?
Indes nicht, aber sass könnte etwas für dich sein. Du schreibst deine Stylesheets in Sass und kompilierst ist sie anschließend in CSS.
-
Indes nicht, aber sass könnte etwas für dich sein. Du schreibst deine Stylesheets in Sass und kompilierst ist sie anschließend in CSS.
SASS könnte generell was sein, ja! Danke!
-
-
Oder, wenn du dir den ganzen Ruby-Kram nicht antun will gibt es auch noch Scout
Dss klingt sehr gut! Merci!
-
-
@@Siri:
nuqneH
SASS könnte generell was sein, ja!
Qapla'
PS: Ansonsten auf CSS-Variablen warten.
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
-
-
-
Gibts dazu einen Ansatz? Eigenschaften in Abhängigkeit von anderen Eigenschaften zu definieren bzw. zu berechnen?
entweder dir reicht calc() oder du verwendest eine serverseitige Lösung um das CSS zu verarbeiten - z.B. SASS oder LESS oder du jagst die CSS-Files einfach durch z.B. den PHP-Interpreter
<?php $var = 20; ?> foo { bar; <?=($var*3.5)?>px }-
entweder dir reicht calc() oder du verwendest eine serverseitige Lösung um das CSS zu verarbeiten - z.B. SASS oder LESS oder du jagst die CSS-Files einfach durch z.B. den PHP-Interpreter
Wenn man nicht gerade auf einer Java-Plattform arbeitet ;-)
Danke!
-
-
Hallo!
mein Wunsch-CSS sähe wie folgt aus:
var cssVar = 20px;
...
}> > Gibts dazu einen Ansatz? Eigenschaften in Abhängigkeit von anderen Eigenschaften zu definieren bzw. zu berechnen? Du bastelst ja augenscheinlich an einem Layout für "small screen Devices" ..., und solange man das große Ganze nicht kennt, kann man immer nur spekulieren, aber ... Interessant wäre mal zu wissen, wo der Wert für 'cssVar' herkommt, bzw. wieviele verschiedene Möglichkeiten für entsprechende Werte es dafür gibt/ geben kann? Desweiteren lehne ich mich mal weit aus dem Fenster und behaupte, dass es keine gute Idee ist, irgendwelche Höhen (heights) fest vorzugeben! Gruß Gunther-
Hallo,
Du bastelst ja augenscheinlich an einem Layout für "small screen Devices" ..., und solange man das große Ganze nicht kennt, kann man immer nur spekulieren, aber ...
Ich beschäftige mich mit responsive Design, ja, und versuch die Ansätz aus diversen Tutorials etc. für mich zu verfeinern.
Interessant wäre mal zu wissen, wo der Wert für 'cssVar' herkommt, bzw. wieviele verschiedene Möglichkeiten für entsprechende Werte es dafür gibt/ geben kann?
cssVar könnte aus der Density des jeweiligen Gerätes kommen (nur so eine Idee)
Desweiteren lehne ich mich mal weit aus dem Fenster und behaupte, dass es keine gute Idee ist, irgendwelche Höhen (heights) fest vorzugeben!
Warum?
Viele Grüße
Siri-
Hallo!
Interessant wäre mal zu wissen, wo der Wert für 'cssVar' herkommt, bzw. wieviele verschiedene Möglichkeiten für entsprechende Werte es dafür gibt/ geben kann?
cssVar könnte aus der Density des jeweiligen Gerätes kommen (nur so eine Idee)
Das haben wir dir schon versucht in deinem anderen Thread zu erklären - die 'Resolution' sollte dich_nur_bei Grafiken interessieren! Ansonsten arbeitest du in deinem CSS "ganz normal" mit CSS-Pixeln!
Desweiteren lehne ich mich mal weit aus dem Fenster und behaupte, dass es keine gute Idee ist, irgendwelche Höhen (heights) fest vorzugeben!
Warum?Gegenfrage: Wozu?
Denn entweder hast du 'overflow:visible', dann kannst du dir die Angabe einer Height eh sparen, oder du läufst Gefahr Inhalte abzuschneiden. Denn ich bezweifel stark, dass bspw. bei deiner Query '(min-width: 451px) and (max-width: 800px)' ein Container stets dieselbe Höhe bräuchte.Oder mit anderen Worten: Mach' keine Baustellen auf, wo sie nicht nötig sind! Weniger ist in diesem Fall mehr!
Gruß Gunther
-
Hallo,
Gegenfrage: Wozu?
Denn entweder hast du 'overflow:visible', dann kannst du dir die Angabe einer Height eh sparen, oder du läufst Gefahr Inhalte abzuschneiden. Denn ich bezweifel stark, dass bspw. bei deiner Query '(min-width: 451px) and (max-width: 800px)' ein Container stets dieselbe Höhe bräuchte.Da bin ich ja bei dir! Ich meinte, dass ich Elemente wie Buttons, Divs etc. mit einer festen Höhe versehe nicht den Container.
Viele Grüße
Siri-
Hallo!
Da bin ich ja bei dir! Ich meinte, dass ich Elemente wie Buttons, Divs etc. mit einer festen Höhe versehe nicht den Container.
Das macht man dann üblicherweise in der Art:
.touch-element {min-height: 60px;}Oder von mir aus auch noch mit unterschiedlichen Min-Werten in verschiedenen Media Rules.
Gruß Gunther
-
-
Hallo,
Das haben wir dir schon versucht in deinem anderen Thread zu erklären - die 'Resolution' sollte dich_nur_bei Grafiken interessieren! Ansonsten arbeitest du in deinem CSS "ganz normal" mit CSS-Pixeln!
Ok, falsch ausgedrückt oder falsch verstanden (je nach dem). Es macht doch einen Unterschied, ob ein Bildschirm mit x'' Diagonale mit 640 x 480 css-Pixeln "betrieben" wird oder mit 320 x 240?
Viele Grüße
Siri-
Hi,
Ok, falsch ausgedrückt oder falsch verstanden (je nach dem). Es macht doch einen Unterschied, ob ein Bildschirm mit x'' Diagonale mit 640 x 480 css-Pixeln "betrieben" wird oder mit 320 x 240?
Es macht auch einen Unterschied, ob die gewöhnliche Betrachtungsentfernung 40cm oder 10m sind.
Für wen das einen Unterschied macht?
Für dich nicht, dir kann das egal sein.
Warum?
RTFM.Ich möchte nicht deinen grundsätzlichen Wunsch nach Variablen in CSS in Frage stellen, ich finde den durchaus berechtigt.
Nur dein Beispiel beweist mir, dass du oben verlinkte Spezifikation nicht gelesen oder nicht verstanden hast.~dave
-
Hallo,
Für wen das einen Unterschied macht?
Für dich nicht, dir kann das egal sein.
Warum?
RTFM.Es macht schon einen Unterschied, wenn ich einen Button mit dem Finger treffen will, da ist die Entfernung quasi 0.
Eine Touchfläche sollte so groß sein, dass sie getroffen werden kann, aber nicht so groß, dass auf den kleinen Geräten unnötig Platz verschwendet wird.Viele Grüße
Siri-
Hi,
denkst du die gewöhnliche Betrachtungsentfernung bei Geräten, die mittels Berührung bedient werden, ist 10m?
~dave
-
denkst du die gewöhnliche Betrachtungsentfernung bei Geräten, die mittels Berührung bedient werden, ist 10m?
*LACH* Ich google mal, ob es darüber eine Studie gibt ;-)
-
-
-
-
Hallo!
Das haben wir dir schon versucht in deinem anderen Thread zu erklären - die 'Resolution' sollte dich_nur_bei Grafiken interessieren! Ansonsten arbeitest du in deinem CSS "ganz normal" mit CSS-Pixeln!
Ok, falsch ausgedrückt oder falsch verstanden (je nach dem). Es macht doch einen Unterschied, ob ein Bildschirm mit x'' Diagonale mit 640 x 480 css-Pixeln "betrieben" wird oder mit 320 x 240?
Bitte - bevor dir nicht 100%ig klar ist, welche Größen hier alle beteiligt sind und welche Rolle sie jeweils spielen, solange wirst du im "Dunkeln umherirren".
Bessere Quellen zur Erklärung als die bereits verlinkten, sind mir leider nicht bekannt.
Vielleicht hilft aber noch diese Tabelle beim Verständnis!?
Und wenn du den Artikel unter http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html gelesen hast, wird dir (hoffentlich) u.a. auffallen, dass:"Similarly, the iPhone 4’s Retina display has a far larger physical pixel density than previous iPhones, and its formal pixel density is 960. Still, it reports 320px for the device-width media query (as well as JavaScript screen.width) both with and without the meta viewport width=device-width."
Es gibt da halt leider so einige "Verständnishürden" bei den Mobile Devices und ihren speziellen "Eigenarten".
Für Android übrigens auch noch sehr wichtig/ hilfreich im Meta-Tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; target-densitydpi=device-dpi">
Die genaue Bedeutung kannst du selber er-googlen. ;-)Gruß Gunther
-
Hallo,
Bitte - bevor dir nicht 100%ig klar ist, welche Größen hier alle beteiligt sind und welche Rolle sie jeweils spielen, solange wirst du im "Dunkeln umherirren".
Bessere Quellen zur Erklärung als die bereits verlinkten, sind mir leider nicht bekannt.
Da hast Du nicht ganz unrecht, aber deshalb frage ich ja auch ;-) Das Feld ist weiter als zunächst gedacht (und zum Teil auch anders gelagert) und aus vergangenen Threads weiß ich, dass du dich intensiv damit befasst hast.
Vielen Dank (auch an die anderen) für die Links! Ich denke, so langsam lichtet sich das Dunkel in meinem Kopf.
Viele Grüße
Siri
-
-
-
-
-