Responsive Web Design

RWD (ang. Responsive Web Design) jest podejściem oraz implementacją do realizacji witryn internetowych znanym z aplikacji desktopowych, m.in.:

• Dostęp przez Przeglądarkę do informacji o rozmiarze okna, fizycznego ekranu, czy orientacji wyświetlania obrazu
• Wskazanie rozmiaru granicznego do zmiany używanego (aktywnego) arkusza styli lub grup reguł
• Wyświetlanie elastyczne (Flexbox layout) określające układ pionowy lub poziomy dla elementów kontenera
• Wyświetlanie siatki (Grid layout) pozwalający określić szczegółowo obszary wyświetlania na nim elementów

Bazowy znacznik, w którym należy dodać instrukcję RWD:

<link media=" +RWD " rel="stylesheet" href="gui/szablon/przyklad.css" type="text/css">

Reguła @ (ang. at-rule) do zastosowania wewnątrz arkusza stylu lub wewnątrz znacznika style:

@media +RWD {
	SELEKTORY {}
}

Ostatnie trzy reguły są rzadziej stosowane.

Podstawowy znacznik załączenia arkusza styli:

W miejsce wyżej wspomnianego TUTAJ wstaw jedną z poniższych opcji:

• Aby arkusz/reguły był przeznaaczony TYLKO do druku:

  media="print" / @media print ... {}

• Aby arkusz/reguły był przeznaaczony TYLKO do wyświetlania:

  media="screen" / @media screen ... {}

• Arkusz/reguły dla okien o rozmiarze nie większym niż ... :

  media="screen and (max-­width: 480px)" / @media screen and (max-­width: 480px) {}

• Arkusz CSS strony dla orientacji ekranu pionowej i poziomej odpodpowiednio:

  media="(orientation: portrait)" / media="(orientation: landscape)"

Znacznik instruujący przeglądarkę jak wyświetlać stronę:

<meta name="viewport" content="width=width, initial-scale=1.0" />

Przygotuj plik HTML zawierający następujące elementy:

• Menu nawigacyjne NAV z 6-ma odnośnikami

• Kontener artykułu podzielony na dwie sekcje, każda po 50% szerokości, z tekstem Lorem ipsum w każdej

• W arkuszu CSS sekcja 1-sza powinna mieć kolor tła, np. żółty, a sekcja 2-ga kolor np. zielony

• Za artykułem kontener DIV z identyfikatorem msg za wierający tekst Proszę obrócić do układu pionowego

Przygotuj plik HTML zawierający następujące elementy:

Widok domyślny:

Jest to widok nieprzewidujący zmian wyglądu (brak responsywności), który należy rozumieć jako startowy.

• Kontener artykułu ma układ wyświetlania flex w kierunku poziomym: row

  article {
  	display: flex;
  	flex-direction: row;
  }

• Sekcje mają szerokość 50%

Widok alternatywny

Jest to widok (arkusz CSS lub reguły z wybranych selektorów) aktywowany po osiągnięciu granicznej szerokości bądź wysokości ekranu.

• Maksymalna szerokość (granica) dla widoku responsywnego to 450px

  @media screen and (max-width: 450px){ /* TUTAJ poniższe SELEKTORY */ }

• Nawigacja ma mieć układ wyświetlania flex w kierunku pionowym: column oraz wyśrodkowaną zawartością:

  display: flex;
  flex-direction: column;
  justify-content: center;

• Odnośniki kontenera NAV mają dostać czerwone tło, wyśrodkowany tekst oraz podwójny rozmiar czcionki: font-size: 200%;

• Kontener artykułu ma mieć układ wyświetlania flex w kierunku pionowym: column

  article {
  	display: flex;
  	flex-direction: column;
  }

• Sekcje mają mieć pełną szerokość 100%

Widok mobilny

Używając instrukcji orientation: ? można określić dla jakiego układu ekranu przeznaczony jest widok CSS.

• Dla ekranu pionowego kontener artykułu ma być widoczny, a komunikat ma być NIEwidoczny:

  @media (orientation: portrait){
  	#msg { display: none;}
  }

• Dla ekranu poziomego kontener artykułu ma być NIEwidoczny, a komunikat ma być widoczny:

  @media (orientation: landscape){
  	article { display: none; }
  }