Paulina Mostowska

Ćwiczenie 13 - Responsywność

Responsywne projektowanie stron internetowych polega na tworzeniu stron internetowych, które dobrze wyglądają na wszystkich urządzeniach. Responsywny projekt strony internetowej automatycznie dostosuje się do różnych rozmiarów ekranu i widoków.
Aby stworzyć responsywną stronę internetową, dodaj do znacznika meta do wszystkich swoich stron internetowych | name="viewport" content="width=device-width, initial-scale=1.0".
Aby strona była responsywna należy elementy ustawiać według szerokości elementów takich jak obrazy podanej w procentach | width="5%". Jeśli max-width właściwość jest ustawiona na 100%, obraz zostanie przeskalowany w dół, jeśli będzie to konieczne, ale nigdy nie będzie skalowany w górę, aby był większy niż jego oryginalny rozmiar.
Rozmiar tekstu można ustawić za pomocą jednostki „vw”, czyli szerokość widoku. W ten sposób rozmiar tekstu będzie zgodny z rozmiarem okna przeglądarki.
Znacznik picture umożliwia zdefiniowanie różnych obrazów dla różnych rozmiarów okien przeglądarki.
Do tworzenia responsywnej strony możemy wykorzystać różne frameworki.