Słów kilka o RWD... czyli od czego zacząć

Czym jest to (nie)szczęsne RWD?

Nie jest to takie hop siup zrobić dobrą stronę RWD, a przy rozbudowanych serwisach wygodniejszym rozwiązaniem jest aplikacja mobilna. Ale nie wybiegajmy za daleko i skupmy się na podstawach RWD.

Czas start!

Na początek musimy sprawić, żeby nasza strona chciała się skalować na różnych urządzeniach. Używamy do tego specjalnego meta tagu:

<meta name="viewport" content="width=device-width, initial-scale=1">

Możemy również zablokować powiększanie, ale nie polecam :)

Mobile first

Pewnie nie raz słyszeliście to określenie - wiele frameworków reklamuje się, że są mobile first. Ale co to tak na prawdę znaczy i czemu warto się stosować do tego?

Zacznijmy od przykładu, zwykła strona którą właśnie tworzymy:

<div class="container">    
<div class="sidebar"></div>    
<div class="content"></div>
</div>

I CSS:

.container {    width: 100%;    max-width: 1200px;    margin: 0 auto;}
.sidebar {    width: 25%;    float: left;}
.content {    width: 75%;    float: right;}

Standardowy, prosty kod. Ale strona nie jest responsywna - na małym ekranie nadal będzie sidebar i content obok siebie.

Dodajmy teraz media queries.

  
@media screen and (max-width: 480px) {     
 .sidebar {          width: 100%;          float: none;      }      
.content {          width: 100%;          float: none;    }
}

I w tym momencie zachęcę Was do korzystania z mixinów w scss. Czy nie prostszy byłby taki zapis:

.container {   
 width: 100%;   
 max-width: 1200px;    
margin: 0 auto;
}
.sidebar {    
width: 25%;    
float: left;    
@include breakpoint(480) {        
float: none;        
width: 100%;    
}
}.content {    
width: 75%;    
float: right;    
@include breakpoint(480) {        
float: none;        
width: 100%;   
 }
}

Wygląda zdecydowanie lepiej - od razu widzimy jak dana klasa ma się zachować w innej rozdzielczości. Ale to nie jest mobile first.

Nadal wychodzimy od PC i zmniejszamy razem ze zmniejszaniem ekranu.

A w mobile first chodzi o to, żebyśmy zaczęli od telefonu. Dostajemy grafikę (wersję desktop tylko) i musimy sobie wyobrazić jak ma się zachować na telefonie/tablecie. Idziemy od mniejszej rozdzielczości (np. 480px) do większej (768px), stosujemy min‑width, a nie max‑width.

Czyli np. zamiast układu sidebar | content ma być przycisk menu i content.

Przeróbmy trochę nasz kod zatem.

.container {
	width: 100%;
	max-width: 1200px;

	margin:0 10px // (ustawmy sobie margines na zmniejszych ekranach na 10px, żeby nie przylegalo do krawędzi)    @include breakpoint(desktop) {
		margin: 0 auto;
		(a teraz go usuwamy i centrujemy stronę na 1200px +)
	}
}
.sidebar {
	display: none;

	// (ma nie być na małych ekranach więc chowamy)    @include breakpoint(tabletbig) {
		// powiedzmy, że na 980px+ czyli tablet 10" już ma być widoczne        display: block;
		width: 30% // (i ma zajmować 30%)        float:left;
	}
	@include breakpoint(desktop) {
		width: 25%;
		// a na 1200+ ma być już nasze domyślne 25%
	}
}
.content {
	width: 100%;

	// na małych ekranach na całą szerokość    @include breakpoint(tabletbig) {
		float: left;
		width: 70%;
	}
	@include breakpoint(desktop) {
		width: 75%;
		// a na 1200+ ma być już nasze domyślne 75%
	}
}
.menu-btn {
	position: absolute;
	top: 0;
	left: 0;

	@include breakpoint(tablet_big) {
		display: none;
		// wkońcu na tablecie 10" mamy już menu to przycisk niepotrzebny
	}

I odpowiedni mixin do tego (znaleziony gdzieś w sieci, ale ładnie się sprawdza)

@mixin breakpoint($point) {
		@if $point == desktopbig {
			@media (min-width:1400px) {
				@content;
			}
		}
		@else if $point == desktop {
			@media (min-width:1200px) {
				@content;
			}
		}
		@else if $point == tablet {
			@media (min-width:768px) {
				@content;
			}
		}
		@else if $point == tabletbig {
			@media (min-width:980px) {
				@content;
			}
		}
		@else if $point == phone_big {
			@media (min-width:480px) {
				@content;
			}
		}
		@else if $point == phone {
			@media (max-width:320px) {
				@content;
			}
		}
	}

Co nam to daje? Najważniejsze i wg. mnie najkorzystniejsze to, że nie musimy nadpisywać stylów, co czasem potrafiło być irytujące (np. dlaczego nadal mi bierze z tego, skoro w media jest inaczej!?). Drugi powód - mamy lepszą kontrole nad tym co dzieje się na danym ekranie (co po części wiąże się z 1.)

Jednak to czy będziesz się stosować do mobile first zależy od Ciebie. Wiem po sobie, że ciężko przejść, ale gdy dostałem większy projekt to sam to zrobiłem bez namowy bo szybciej(!), mimo prawie skończonej pracy, było mi dostosować projekt pod mobile first niż nadpisywać css media queries dla mniejszych rozdzielczości.