CSS: Media queries

0:00Część z tej lekcji opowiem ci o mediach ile naprawdę sensacji response.

0:05Przynajmniej 10 lat temu.

0:07Teraz mamy też takie narzędzia jak

0:09CSS Grid który do pewnego stopnia pozwala tworzyć Response przez media.

0:15Natomiast gdzieś pamiętam w okolicach 2012.

0:19Po raz pierwszy może nie po raz pierwszy ale po raz

0:22pierwszy na pewno zacząłem pisać media kulisy i generalnie media

0:27bardzo dobrze wpisują się w pozostałe mechanizmy CSS a takie jak kaskada.

0:33Gość Czy dziedziczenie czy specyfice.

0:37Znając wszystkie te poprzednie mechanizmy i media jesteś w stanie naprawdę tworzyć

0:43dobre buty w sposób świadomy i bezpieczny że nic ci tam się nie będzie rozwalić z

0:49powodu takiego że faktycznie dzisiaj atakują.

0:52Więc co można zrobić to media kulisy

0:55piszemy przy pomocy znaku po polsku po angielsku i możemy napisać et media.

1:03Po tej klauzuli podobnie do

1:06smsów podajemy tak naprawdę warunki kiedy ta reguła ma działać czy jeżeli damy sobie

1:12Screen no to tak naprawdę dla każdego ekranu ta.

1:16Reguła będzie działać więc nie jest to

1:18zbyt użyteczna reguła ponieważ tak naprawdę moglibyśmy napisać cokolwiek poza

1:24tym mediach kursem ale możemy je przejmować.

1:28Czyli możemy powiedzieć że jeżeli jest to ekran oraz jego maksymalna szerokość.

1:38Max.

1:40To jest powiedzmy 600 pikseli.

1:42No to wtedy za pliku i takie style.

1:45Czy jeśli sobie wrzuci mi np.

1:46Box.

1:49Wewnątrz takiego.

1:53I ustawiamy mu szerokość na może troszkę mniejszą wtedy na dwa.

1:58Nie będzie to prawdopodobnie wyglądało

2:00zbyt dobrze ale możemy to przetestować czy to w ogóle działa.

2:03Widzimy że faktycznie przy realizowaniu

2:06tutaj niestety Chrome się troszkę zawiesza ale widzimy że.

2:10W prawym górnym rogu przeglądarki zwiększa się powolutku nasz port.

2:16No i generalnie powyżej sześciuset pikseli

2:21szerokości będzie aplikować na tylko ta reguła Box powyżej która się implikuje tak

2:27naprawdę zawsze niezależnie od szerokości naszego portu

2:31a ta reguła będzie się aplikować tylko wtedy kiedy te warunki będą spełnione i to

2:36nie muszą być tylko i wyłącznie zapytania o.

2:40Szerokość czy wysokość portu mogą być równie dobrze zapytania o aspekt

2:46naszego urządzenia czy w danym momencie korzystamy

2:50z widoku drukowania czy użytkownik ma jakieś preferencje własne np.

2:58woli ciemny interfejs od jasnego o tym

3:02wszystkim oczywiście będę mówił w późniejszych lekcjach natomiast teraz

3:06chciałbym pokryć po prostu składni i jak pracować za kulisami ogólnie czyli możemy

3:11dodawać kolejne wartości warunki poprzez użycie słowa kluczowego End

3:17w nawiasach podawania wartości dla której ma dany blok kodu się wykonywać.

3:23Możemy spróbować wykorzystać to do czegoś

3:25bardziej pożytecznego czyli na przykład na mniejszych rozdzielczości.

3:29Chcielibyśmy żeby szerokość naszego elementu zajęła 100 proc.

3:34dostępnej szerokości nie 100 proc. ale 100 proc.

3:37szerokości dostępnej po prostu dla tego

3:40elementu który jest w tej sali czyli Box a i to jest takie bardzo klasyczne

3:45użycie MF słów żeby po prostu na małych rozdzielczości ach rozszerzać

3:51elementy jeżeli zajmujemy się podejściem desktop co jest bardzo częstym podejściem.

3:57Jeżeli tworzymy aplikacje desktop topowe np.

4:00jakieś edytor stron internetowych na przykład typu

4:04Get czyli takie po prostu Dragan grupowe

4:07przeciąganie elementów na stronie i to nam generuje faktyczny kod HTML CSS

4:12czy po prostu narzędzia typu Sigma Sigma też jest narzędziem przeglądarki.

4:18W związku z czym tak naprawdę tego typu aplikacje nie ma sensu tworzyć ich mobile

4:23first taka jest takie jest moje prywatne zdanie a jeśli chcemy robić strony Mobile

4:27Faith no to oczywiście tworzymy najpierw style pod mniejsze rozdzielczości i media

4:32kulisy ot wracamy tzn piszemy między 600 pikseli i dopiero jeżeli nasza

4:38przeglądarka będzie miała przynajmniej 600 pikseli no to wtedy te

4:43zasady wszystkie sektory zostaną zablokowane do naszego kodu.

4:47Gdy ten warunek zostanie spełniony czyli możemy np.

4:52tutaj zrobić odwrotność tego co

4:54napisaliśmy przed chwilą poprzez przenoszenie boksach wyżej.

5:00Domyślnie żeby nasz Box miał 100 pikseli i po napisaniu.

5:05Nasz Call będzie zachowywał się

5:06identycznie tak samo tylko że style te ogólne będą aplikować

5:12dla tych mniejszych rozdzielczości to jest często dobre podejście ponieważ możemy

5:16zrobić bazowe style które układają się w sposób w miarę

5:20rzetelny ponieważ mamy tutaj ten flow Display bloków domyślnie.

5:25Oczywiście możemy też zrobić jak. Nie ma to znaczenia.

5:28No i w zależności tylko od tego że jesteśmy na urządzeniu mobilnym np.

5:35na laptopie no to wtedy ustawiamy te elementy w inny

5:39sposób czy zmieniamy ich rozmiar czy inne właściwości.

5:44W związku z czym Mobile jest często

5:46podejściem które faktycznie może ułatwić nam życie natomiast też nie byłbym tutaj

5:51na tyle Party aby mówić że mobile first jest jedynym dobrym podejściem i nie da

5:55się pisać dobrego kodu CSS robiąc go desktop.

6:00Generalnie co do całego CSS polecam nie

6:03trzymać się jakichś tam słów kluczowych które są w danym momencie

6:08modne tylko starać się zrozumieć język i przeglądarki

6:12tak żebyśmy po prostu byli w stanie wykonywać naszą pracę i tworzyć

6:16w taki sposób żebyśmy też pozostali przy zmysłach własnych

6:22a nie na siłę

6:24próbowali konceptu w niekoniecznie dla naszego projektu będą działały.

6:28No i oczywiście jeżeli byśmy wrócili do

6:30tego podejścia desktop no to możemy zrobić różne inne rzeczy.

6:34Oczywiście możemy je też zrobić w tym drugim.

6:37Możemy wyrównać sobie nasz element.

6:40W pionie i w poziomie tylko na danej

6:42rozdzielczości czyli Tutaj ustawiamy sobie np Display Flex

6:48content Center Line content Center.

6:53Za piszemy i faktycznie na tych mniejszych rozdzielczością

6:58to się nam będzie aplikować.

7:00Zastanawiam się czemu tutaj tego nie widzimy.

7:03Zobaczmy to poprzez użycie słów tutaj możemy użyć tego elementu aby

7:09zaznaczyć dowolny element na stronie i podejrzeć jego style.

7:12Tutaj faktycznie weszło Display Flex content Center Line content Center.

7:21Ale tutaj nasz tekst powinien.

7:24Pana testów ale on się powinien tutaj na wysokość tego elementu usunąć.

7:30Jestem ciekawy czemu się nie rozpoczną.

7:36Pan ma tutaj.

7:39100 procent szerokości

7:42Nobla możemy zrobić tak że tutaj ustawiamy Diva ustawiamy klasę.

7:48Tekst i ten tekst możemy sobie jakoś tam jeszcze koncentrować na flecie.

7:54Tak naprawdę nie ma to znaczenia.

7:57Ja bym się nie przejmował takimi

8:00drobnymi rzeczami jeżeli czasami trzeba dodać klasę do elementu HTML.

8:04Nie ma sprawy jeden raper czy dwa raper.

8:07Na naszą treść też są jak najbardziej w porządku.

8:10Tutaj po prostu popełniłem literówki właściwości

8:16content będzie nam rozszerzał to

8:18pojedyncze wersy danego elementu refleksje o tym będę oczywiście

8:23mówił i tutaj powinno być like it is no i wtedy ten tekst nam się tutaj truje.

8:28No wiadomo takie parkingi też jakby są jak najbardziej OK nikt nie jest nieomylny.

8:34W związku z czym nie przejmuj się jeżeli za pierwszym razem

8:39jakaś wartość CSS owa nie do końca wam działa tak jak tutaj u mnie na nagraniu

8:42tak naprawdę cały Web Development to jest proces prób i błędów.

8:46I za którymś razem tak naprawdę się udaje po prostu łatwo jest zrobić beczkę.

8:53W związku z czym też się tym nie przejmuję.

8:55No i najważniejszą rzeczą w tych mediach publicznych jest też to że możemy dać

8:58kilka różnych sektorów obok siebie to znaczy nie jesteśmy.

9:03Ograniczeni tylko i wyłącznie do edycji jednego sektora np.

9:07Box wewnątrz takiego bloku tekstu.

9:10Tylko możemy tak naprawdę całą masę kodu w osobnym szczycie załadować.

9:16Jest to nawet wspierane poprzez ładowanie

9:18bezpośrednich hitów przez HTML a czy możemy linkiem ustawić media tak aby.

9:27Udawały się w danym porcie natomiast.

9:31Podejrzewam że to zależy od przypadku.

9:33Być może czasami ma to sens zwłaszcza że jeżeli mówimy już o kodzie produkcyjnym no

9:39to z reguły nasi użytkownicy nie zmieniają rozmiaru portu.

9:43Jeżeli ktoś wchodzi z telefonu to nagle mu

9:46się nie będą odbywały style Table Tower w związku z czym czasami faktycznie lepiej

9:51jest nie ładować wszystkich Styrii dla desktop.

9:55Jeżeli jesteśmy mobile first no i prawdopodobnie nasi użytkownicy nie będą.

10:01Poszerzanie naszego okna bo po prostu nie będą w stanie będą na urządzeniu mobilnym.

10:06To jest podstawowa składnia media kursów pojedyncze.

10:10Ciekawe wartości i efekty które możemy

10:13uzyskać przy pomocy tej klauzuli omówienie w kolejnych częściach kursu.

10:20Ale media kuervas to są tak naprawdę już kończąca.

10:26Część tej układanki którą omawialiśmy w tym dziale czyli

10:31takich podstaw fundamentów CSS a które pozwolą Wam pisać go bardziej świadomie

10:37pomijając oczywiście takie oczywiste problemy jak.

10:42Jaka jest składnia CSS.

10:43Tutaj mamy klamry że tutaj są.

10:46Pola tutaj są wartości znając kaskady specyfice ITI tryby

10:52wyświetlania media kulisy generalnie cały dział tego kursu.

10:55Jestem pewien że będziecie mogli lepiej

10:58korzystać z CSS a tym samym też lepiej zrozumieć dalszą część tego kursu.