Jak tworzyć strony responsywne

W moich wcześniejszych wpisach spotkaliście się ze słowem „responsywne” bądź „RWD” co oznacza po angielsku Responsive Web Design. Czyli po polsku – strona elastyczna, która dostosowuje się pod różne rozdzielczości i urządzenia mobilne jak smartfon, tablet.

Chcę tutaj pokazać tak w krótkiej instrukcji, jak za pomocą kilku linijek kodów wykonać taką stronę.

Początek kodu html można zapisać tak:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>RWD</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="index, follow" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content="www.tworzenie-stronek.pl" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Nie koniecznie muszą znajdować się te wszystkie linijki, dałam przykład, ja ich używam.

Ważną linijką do responsywności, bez której strona może za dobrze nie działać, jest linijka:

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

Teraz w html chcę wykonać taki układ:

rwd1
Czyli 2 kolumny obok siebie z tekstem i zdjęciem, tak dla przykładu.

Prezentuje się to dobrze jak oglądamy na dużym monitorze, ale przykładowo zwęzimy okno przeglądarki i zobaczmy jak to by wyglądało na smartfonie:

rwd2
Wąsko co nie? I obrazek mały. Jak temu zaradzić? Wystarczy napisać oddzielne style z regułą która mówi że dla rozdzielczości mniejszej niż 500px szerokości kolumna lewa i prawa będzie na 100% szerokości strony, a zdjęcie też będzie większe na całą szerokość ekranu smartfona.

rwd3
Lepiej? Lepiej 🙂

Zacznijmy od początku, jak tego dokonałam. Kod html head już znacie, wyżej napisałam.
Teraz kod divów lewego, prawego i obrazka, a wygląda on tak:

<div id="left">
<img src="cat.jpg"><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

<div id="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

Teraz trzeba to ostylować, w pliku style.css dodajemy kod:

#left{
	float: left;
	width: 48%;
	padding-right: 2%;
	text-align: justify;
}

#left img{
	max-width: 100%;
}

#right{
	float: left;
	width: 48%;
	padding-left: 2%;
	text-align: justify;
}

Ok, to teraz napiszmy kod dla responsywności pod urządzenia mobilne jak smartfon:

@media (max-width: 500px) {
html, body {
	font-size: 14px;
}
#wrapper{width:100%;}
.page{width:90%;}
#left{
	width: 100%;
	margin-bottom: 5%;
	padding-right: 0%;
}
#right{
	width: 100%;
	padding-left: 0%;
}
}

Właśnie ta linijka @media mówi do przeglądarki, że jeśli rozdzielczość jest mniejsza lub równa 500px, to należy lewą i prawą kolumnę dać na 100% szerokości.

Co do obrazka, to już zdefiniowałam wyżej w kodzie:

#left img{
	max-width: 100%;
}

Który mówi, że obrazki w kolumnie o identyfikatorze #left mogą mieć maxymalną szerokość 100%, dzięki czemu nie wyjdą poza stronę i będą elastyczne.

Reszta kodu dla innych rozdzielczości:

@media (min-width: 1581px) {
#wrapper{width:100%;}
.page{width:1180px;}
}

@media (min-width: 1085px) and (max-width: 1580px){
#wrapper{width:100%;}
.page{width:90%;}
}

@media (min-width: 501px) and (max-width: 1084px){
#wrapper{width:100%;}
.page{width:90%;}
}

Oczywiście sami możecie ustalić swoje przedziały szerokości, to wszystko zależy od układu strony.

Kod:

@media (min-width: 501px) and (max-width: 1084px){

Odpowiada za szerokość w przedziale od 501px do 1084px i w tym przedziale możemy nadawać oddzielne reguły styli.

Proste? Jasne że tak, sama dopiero całkiem niedawno nauczyłam się praktycznie z jednego też tak krótkiego tutoriala jak nadawać oddzielne reguły styli. Na chłopski rozum można łatwo to pojąć 🙂
Myślałam że nie polubię tworzyć tych dodatkowych, oddzielnych styli, ale nawet mi się to spodobało, lubię patrzeć jak coś się tworzy krok po kroku, tak jak zamek z klocków 🙂

Dziękuję za uwagę, na dziś to by było na tyle, wracam do swoich obowiązków i przyjemności 🙂

Podobne wpisy

Subscribe
Powiadom o
guest

6 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Adam
7 lat temu

Polecam Ci skorzystanie z najlepszego obecnie rozwiązania, jakim jest framework Bootstrap. Zanim go poznałem, to wszystkie regułki @media pisałem ręcznie. Wymyśliłem sobie, że jedna strona będzie się zmieniać co 100px… od telefonu po full hd 🙂 Fajnie napisany poradnik, pozdrawiam.

Adam
7 lat temu

Z ilością kodu w Bootstrapie masz rację- jakieś 6000 linijek w głównej bibliotece. Najlepiej się to sprawdza gdy ktoś jest gotowy korzystać tylko z gotowych rozwiązań i nie chce za bardzo kombinować. Przyznam, że oprócz bootstrapa, zawsze robiłem dodatkowy plik .css, w którym niezbyt elegancko (!important) wymuszałem pewne zmiany 🙂 Jakby chcieć to zrobić ładnie, to za każdym razem trzeba 'przedzierać’ się przez te tysiące linijek, żeby znaleźć i zmienić tą jedną, konkretną. Jako narzędzie, w dużym stopniu usprawniające pracę nad stroną, polecam każdemu wtyczkę Firebug do przeglądarki Firefox.

Rafał
7 lat temu

Bardzo fajny artykuł, wszystko jasno wytłumaczone 🙂

Franek
7 lat temu

Świetny artykuł i na prawdę jasno i wyraźnie wszystko wyjaśnione. Nawet kompletny laik zrozumie :). Chociaż mimo wszystko samo tworzenie stron www to dosyć ciężkie zadanie dla kogoś niedoświadczonego 🙂 Ale jak to mówią trening czyni mistrza 🙂