Wykryj wymiary przeglądarki za pomocą CSS3

Kiedy zaczynamy prosto w świecie elastyczny projekt ważne jest, aby wiedzieć, jakie są nowe zasady CSS3, pomaga nam to wykryć wymiary ekranu, na którym przeglądana jest strona internetowa lub aplikacja.
Jedną z tych zasad jest @połowa, który przy odpowiedniej kombinacji warunków pozwala nam poznać wielkość ekranu jako takiego i w zależności od wyniku podjąć odpowiednie działania dotyczące jego konstrukcji.

Korzystanie z zapytań o media

Stwórzmy kod HTML proste i tam dołączymy nasz arkusz stylów, który będzie zawierał zasady dla naszego oznaczać chce, Zobaczmy:

 Wykryj wymiary ekranu 

Jak widać, jest to dość prosty kod, jednak jest kilka rzeczy do podkreślenia. Pierwszy jest zawarty w etykietach styl, mamy dwie zasady, pierwsza wskazuje, że od 600 pikseli kolor tła naszego tekstu na etykiecie h1 Zmieni się na niebieski, zobaczmy, kiedy zmienimy rozmiar w przeglądarce i ta zmiana zacznie obowiązywać:

Druga zasada wskazuje, że jeśli maksymalna szerokość to 400 pikseli kolor tła tekstu zmieni się na czerwony, co wskazuje na trzeci warunek, ponieważ wszystko poniżej 400 pikseli będzie czerwone, a powyżej 600 będzie niebieskie, więc od 401 do 599 pikseli zachowa domyślnie kolor biały, zobaczmy:

Na koniec, jeśli znacznie zmniejszymy ekran naszej przeglądarki, wprowadzimy regułę dla naszego czerwonego koloru tła, zobaczmy jak to wygląda:

Widzimy wtedy, że wykrycie wymiarów naszej przeglądarki jest niezwykle prostym zadaniem dzięki CSS3, co jest niezwykle przydatne, gdy pracujemy z projektami responsywnymi i musimy znać wymiary przeglądarki użytkownika, aby zastosować style, które sprawią, że nasza witryna będzie dobrze wyglądać na dowolnym urządzeniu i przy istniejącej rozdzielczości ekranu.