vmax - jednostki w css

pytanie zadane 7 czerwca 2018 w HTML i CSS przez Jarver Użytkownik (820 p.)

Dzien dobry! :)

Mam pytanie odnośnie jednostek viewpoint o ile można to tak określić... Naczytałem się sporo o tym i pobawiłem formatując tekst... Ale nadal nie jestem pewien czy to rozumiem. Gdyby ktoś mógł mi potwierdzić gdy ustawiam

p{
 font-size:10vw;
}

Co to oznacza w praktyce? Że wielkości jednej literki w akapicie będzie wynosić 10% obszaru widocznego w danej przeglądarce? Bo chyba nie do końca... Dalsze pytanie czy jak by tam było 10vh to 10% obszaru względem wysokości? Kolejne pytanie :P a jak to wygląda gdy ustawiam vh i vw za jednym razem? Na jednej stronie to było niby ładnie pokazane... Ale teraz się tym bawiłem u siebie i no jednak chyba nie rozumiem...

Dobra teraz pytanie o vmin i vmax... vmax to tak jakby hmnn

p{
      width: 50vmax;
}

No ten parametr mi mówi chyba ze akapit ma zajmować tak jakby 50% szerokości strony a potem <br> i niżej na dół, ale co oznacza vmin? Jak to rozumieć bo wpisując width:100vmin; to akapit zajmuje 50% obszaru widocznego...

No i chyba ostatnie pytanie co z tym z vmin i vmax gdy mówimy o height gdy ustawie height:50vmax; to przeciez bez sensu chyba...

Gdyby ktoś miał dość cierpliwości, aby mi to wytłumaczyć będę bardzo wdzięczny :))) Z góry dziękuję, pozdrawiam cieplutko Michał.

2 odpowiedzi

odpowiedź 7 czerwca 2018 przez Comandeer Guru (601,590 p.)

vmin oznacza "jeśli wysokość jest mniejsza niż szerokość, wówczas zachowuj się jak vh; w innym wypadku jak vw". Analogicznie działa vmax, z tym, że wybiera to, co jest większe.

Np. jeśli strona ma 1920x670, to 10vmin wyniesie 67px (10% * 670), a 10vmax wyniesie 192px (10% * 1920).

PS Wkrótce zamiast vw i vh będziemy się posługiwać vi i vb – ale to taka totalnie nieprzydatna do niczego ciekawostka ;)

komentarz 7 czerwca 2018 przez Jarver Użytkownik (820 p.)

Jakie to proste teraz :D dziękuję Tomek. No teraz czuje że rozumiem temat! Że tak zapytam z czystej ciekawości te vi vb na jakiej zasadzie będą działać? :) A i w sumie w międzyczasie jeszcze jedno pytanie, jeśli można - po ustawieniu width:100vw; Pojawia się niewdzięczny pasek na dole sugerujące że okno przeglądarki jest większe niż w rzeczywistości czemu tak się dzieje? Jakiś parametr nie jest ustawiony poprawnie? (PS. margin ustawiłem dla tagu body na 0).

2	komentarz 7 czerwca 2018 przez Comandeer Guru (601,590 p.) Pamiętaj, że to 100vw zawiera też w sobie miejsce zajmowane przez pionowy pasek przewijania ;) A co to vb i vi – będą działać tak samo, po prostu są definiowane w inny sposób (przy pomocy pojęć osi blokowej i liniowej).

komentarz 7 czerwca 2018 przez Jarver Użytkownik (820 p.)

:) Dzięki Mentorze za rady i pomoc, bardzo doceniam i pozdrawiam cieplutko Michał.

odpowiedź 7 czerwca 2018 przez Wujek Greg Dyskutant (9,410 p.)

vw - jest to jednostka odpowiadająca za szerokość okna przeglądarki, czyli w praktyce 10vw oznacza 10% szerokości okna przeglądarki

vh - to samo tylko tyczy się wysokości okna przeglądarki

zrob sobie dwa divy, które będą kwadratami np jeden 10vh x 10vh a drugi 10vw x 10vw i zmniejszaj raz szerokosc okna a raz wysokosc i zobaczysz jak to działa

na temat vmax i vmin sie nie wypowiem poniewaz nie uzywalem w praktyce

komentarz 7 czerwca 2018 przez Jarver Użytkownik (820 p.)

Lodzio miodzio :D tak zrobiłem już rozumiem dziękuję za wytłumaczenie i podesłanie rady :) Trochę dziwnie, co prawda stosuje się do czcionki, ale moze taki urok, może lepiej używać tam innych jednostek jak em czy niezmienne pixele :)

To jeszcze gdyby ktoś mógł rozwinąć temat vmax i vmin, byłoby super!