Viewport proportionale Dimensionierung
bearbeitet von marctrixHej beatovich,
> > @@marctrix
> Ich will aber, dass die Breite 100% des parent ist und die Höhe dann die Proportion des Viewports wiedergibt:
>
> ~~~~css
> #ex12{
> --var1:1;
> width:calc( var(--var1) * 100%); /* einfach so breit wie der Parent*/
> height:calc( var(--var1) * 100% / 100vw * 100vh); /* proportional umgerechnet */
> font-size: calc( var(--var1 ) * 3 * ( 1vw + 1vh ) );
> }
> ~~~
>
> Geht so was mit CSS?
Ne, weil du die Höhe dadurch ja änderst (so habe ich das verstanden). 100% von etwas, das du erste berechnest ist ja nicht bekannt. Der Browser rechnet ja mit den Pixeln, die ermittelt und wie viele Pixel 100% sind, ist ja abhängig von dem Rest der Rechnung, kann also keinen festen Pixelwert annehmen und somit nicht zur Berechnung herangezogen werden. Wie gesagt: sofern ich das korrekt verstanden habe, ist das generell das Problem bei Höhen.
Marc
PS: "ICh will" ist natürlich kein Grund, etwas zu tun. Ich nehme mal an, du meintest "ich brauche das aus Usability-Gründen" 😉
Viewport proportionale Dimensionierung
bearbeitet von marctrixHej beatovich,
> > @@marctrix
> Ich will aber, dass die Breite 100% des parent ist und die Höhe dann die Proportion des Viewports wiedergibt:
>
> ~~~~css
> #ex12{
> --var1:1;
> width:calc( var(--var1) * 100%); /* einfach so breit wie der Parent*/
> height:calc( var(--var1) * 100% / 100vw * 100vh); /* proportional umgerechnet */
> font-size: calc( var(--var1 ) * 3 * ( 1vw + 1vh ) );
> }
> ~~~
>
> Geht so was mit CSS?
Ne, weil du die Höhe dadurch ja änderst (so habe ich das verstanden). 100% von etwas, das du erste berechnest ist ja nicht bekannt. Der Browser rechnet ja mit den Pixeln, die ermittelt und wie viele Pixel 100% sind, ist ja abhängig von dem Rest der Rechnung, kann also keinen festen Pixelwert annehmen und somit nicht zur Berechnung herangezogen werden. Wie gesagt: sofern ich das korrekt verstanden habe, ist das generell das Problem bei Höhen.
Marc