• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

vw/vh/vmin/vmax - jednostki w css

Aruba Cloud - Virtual Private Server VPS
0 głosów
868 wizyt
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

+3 głosów
odpowiedź 7 czerwca 2018 przez Comandeer Guru (606,480 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 (606,480 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ł.
+1 głos
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!

Podobne pytania

+2 głosów
1 odpowiedź 901 wizyt
0 głosów
0 odpowiedzi 430 wizyt
pytanie zadane 28 września 2021 w HTML i CSS przez Doge Gaduła (3,420 p.)
+1 głos
2 odpowiedzi 1,387 wizyt
pytanie zadane 6 sierpnia 2021 w HTML i CSS przez niezalogowany

93,322 zapytań

142,320 odpowiedzi

322,388 komentarzy

62,651 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...