CSS: Jednostki względne do rozmiaru okna

0:00Poprzedniej lekcji wspomniałem o różnych

0:02jednostkach SMS owych względnej i absolutnych.

0:05Wspomnę tutaj o kilku jednostkach odnoszących się bezpośrednio do portu

0:10czyli do ekranu który mamy tutaj przed sobą w przeglądarce czyli Wu port to jest

0:16generalnie to wszystko aż do paska przeglądarki.

0:20Minus oczywiście np.

0:21narzędzia deweloperskie w tym momencie

0:23port nasz jest niższy niż był przed chwilą.

0:26To jest po prostu ta przestrzeń

0:28w której przeglądarka może wędrować elementy i tak jak wspomniałem w przedniej

0:32lekcji używanie procentów raczej nie jest w tym momencie polecane do większości

0:38elementów które faktycznie ustalają nam play out bo jak widać mamy jednostki

0:42Faction i Unit dla Flex a mamy po prostu Flex grą i też wartości.

0:49Redakcyjne wobec elementów danego elementu

0:52Flex czy po prostu Remy procenty oczywiście też są OK.

0:58Jeżeli chcemy ustawić czemuś 100 proc.

0:59czy

1:01po prostu połowę danej szerokości ale

1:03czasami może być to mylne bo procenty nie są zawsze tak samo interpretowane przez

1:08CSS a jeśli pracujemy z procentami w kontekście

1:12szerokości i wysokości naszego okna to bardzo często jest przykładem.

1:16Jeśli robimy np. medale no to możemy do tego użyć jednostek

1:21takich jak Port Hyde czy port i skrótem do tego są.

1:29Po prostu jednostki VHS czy VW.

1:32Jeżeli ustawiamy sobie

1:34naszego boksera na 100 VW to ten element będzie miał równo tyle co nasz sport.

1:41W tym momencie jeżeli jest parking na naszym na naszym elemencie i nie możemy go

1:46wygenerować w ten sposób no to oczywiście to spowoduje nam z.

1:49Możemy sobie na ten parking zresetować

1:53no i wtedy jesteśmy pewni że nie ma tutaj tego króla a my

1:56odnosimy się do stu procent szerokości przeglądarki

2:01i adekwatnie możemy też zrobić.

2:06VHS czyli Sport HD no i to też zadziała ale Kroll będzie ponieważ

2:11zajmujemy cały portal tutaj jakieś elementy są jeszcze poza

2:15tym naszym elementem więc moglibyśmy jakoś sobie odjąć np.

2:19100 proc. z portu.

2:22Odjąć szerokość tego elementu jeżeli byśmy ją znali no powiedzmy że jest to.

2:282. Ciężko mi tutaj powiedzieć.

2:30No i wtedy faktycznie króla mieć nie będziemy.

2:33Jest to zdecydowanie więcej niż 2 cm.

2:35Skoro mamy króla.

2:37Natomiast jeśli zależy nam na procentach szerokości ekranu to port Haiti Port

2:43ów są jednostkami do których powinniśmy się odnosić

2:48i te jednostki są szczególnie przydatne

2:50jeżeli robimy właśnie modele jeśli robimy sobie tutaj na nich indeks 1.

2:55Absolutnie o których wspomnę też za chwilę

2:59top na zero Left zero czyli tak naprawdę wyrzucamy nasz element z poza falą.

3:07Normalnego Florent żerowanie elementów i ustawiamy sobie indeks na jeden no to w

3:11tym momencie ten element będzie nam zagrywał to co było

3:16pod spodem.

3:17Więc jeżeli ten Box byłby tak naprawdę medalem możemy zmienić nazwę

3:21Spider nr box to będzie Intermodal i możemy mu tak naprawdę zmienić też kolor

3:28model tylko model.

3:31.

3:32No i ustaw mu na

3:35prąd powiedzmy.

3:39Będzie taki szary.

3:43Możemy oczywiście ustawić jakieś opaski.

3:47I nadal możemy sobie ustawić na.

3:51Jakiś kolor stały np.

3:52Ground Wait usunie sobie autor tekst ustalimy nr modelowi jakąś tutaj ładną.

4:00Rozmiar czcionki.

4:03Powiedzmy na 50 VW czyli 50 proc.

4:07z importu i chyba też na 50 proc.

4:09importu możemy go opozycja nazwać.

4:11O tym oczywiście też później mówił marginesem.

4:16Zero a po prostu auto.

4:19I teraz rozciągnąć to na każdą ze stron.

4:24O pozycjonowanie absolutnym będę jeszcze

4:26mówił No i tutaj to ple Street bo tam absolutnie.

4:33Zastanawiam się czemu to tutaj nam jeszcze nie weszło.

4:37Aha no tak oczywiście bo to musielibyśmy zrobić na

4:41elemencie wewnętrznym więc to zostawiamy tak jak jest bo.

4:44Model to jest cały ten szary box i Intermodal to jest nasze faktyczne

4:49treść tego modelu więc tutaj możemy sobie cenzurować na przykład Flex.

4:55Display Flex content.

4:58Center Line

5:01Center.

5:04Teraz to będzie na środku

5:05opaski i możemy zdjąć tak naprawdę stąd i ustawić je tylko na tutaj.

5:11Na samo tło wtedy nie będzie nam Intermodal też się stawał przezroczysty.

5:17Na połowę.

5:20No i widzimy że teraz ten model jest otwarty bo przecież miło nam to tekst.

5:24No i mamy jakiś tutaj tekst wewnętrzny i jesteśmy pewni że jak będziemy rozszerzać

5:29nasze okno przeglądarki no to zawsze będzie to 50 proc.

5:34szerokości naszego okna czy jego wysokości.

5:36Jeżeli byśmy zmieniali jego wysokość np.

5:40poprzez dach Turcy kolejnymi ciekawymi wartościami

5:44powiązanymi z portem są Wiedźmin i WiMax to są bardzo dynamiczne jednostki które

5:51przyjmują wartość mniejszej bądź większej krawędzi czyli.

5:57Zróbmy to na przykładzie Jeśli ustalimy wpływ na min.

6:0350 min.

6:04To znaczy że jeśli szerokość naszego okna będzie mniejsza niż jego wysokość czyli

6:12coś takiego no to wtedy brana jest jego szerokość.

6:16Natomiast jeżeli szerokość jest większa niż wysokość to wtedy brana jest wysokość

6:24ponieważ to jest w dół port i ta mniejsza opcja.

6:28No i oczywiście jako WiMAX też możemy

6:30ustawić i wtedy brana jest ta dłuższa czyli w tym wypadku będzie wzięte 50 proc.

6:34szerokości portu za piszemy i teraz to wygląda ok.

6:37. Natomiast jeśli to zmniejszymy do takiego

6:40poziomu że wysokość naszego portu jest faktycznie większa niż jego szerokość.

6:49No to wtedy nasz element będzie się tak

6:51jakby rozszerzał będzie szerszy niż wyższy.

6:55Oczywiście tutaj też możemy zmienić sobie tona w imieniu Max.

6:58Te dwie wartości są bardzo przydatne

7:00jeżeli mierzymy aspekt rejsie danych elementów albo zależy nam na tym żeby dane

7:05elementy wyświetlał się zgodnie z podanymi aspekty rejsie np.

7:09wideo czy frejmach to są bardzo przydatne

7:12właściwości które w połączeniu z media można wykorzystać do tworzenia.

7:19Naprawdę dobrze wyglądających stron. Czy w tym przypadku.