chevron-left chevron-right

[CSS]Responsywny webdizajn – a co to w ogóle jest?

W dzisiejszych czasach, kiedy jest wysyp tak wielu różnych urządzeń posiadających ekrany o różnych rozdzielczościach i z dostępem do Internetu bardzo trudno jest tworzyć strony, które idealnie będą się dostosowywały do rozdzielczości tych urządzeń.

Responsywny webdizajn - zagadnienie, które porusza kwestie związane z użytecznością stron WWW w zależności od rozdzielczości urządzenia.
Celem tego zagadnienia jest opracowanie metod, które pozwolą na dostosowanie rozmiarów zawartości strony i jej układu elementów w zależności od urządzenia dostępowego.

Elastyczny CSS

Celem dzisiejszego artykułu będzie utworzenie mechanizmu pozwalającego skalować obrazki i tło w zależności od rozdzielczości.
Na początek, zaczniemy od utworzenia kodu HTML, który będzie szkieletem naszej "elastycznej" strony: 

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
	<section>
		<article>
			<figure>
				<img src="img/obrazek.jpg" alt="Obrazek" title="Obrazek"/>
				<figcaption>Obrazek testowy</figcaption>
			</figure>
			<p>
				Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
			</p>
		</article>
	</section>
</body>
To jest przykładowa struktura HTML. Jak zapewne zauważyłeś/aś korzystam tutaj z HTML5, który zapewnia większą semantykę kodu (co jest dla mnie ważne).

Przykładowy obrazek, który będzie ustawiony jako tło wygląda następująco: Tło strony z responsywnym dizajnem Od razu widać, że nie jest on równo podzielony na pół, tylko jedna jego część jest węższa od drugiej. Zależy nam na tym, aby ta węższa część była tłem dla paska bocznego menu, a jego szersza część tłem dla treści strony. Dlatego, aby tło zawsze idealnie się dopasowywało, należy policzyć ile procent szerokości całego obrazka zajmuje szerokość jego szerszej części. Można to sprawdzić za pomocą programu graficznego typu Adobe Photoshop lub Gimp.
W moim przypadku szara część tła ma szerokość 1128x co stanowi 58,75% szerokości całego obrazka w tle. Wykorzystamy go w naszym pliku CSS: 

1
2
3
4
5

body {
	font-family: Arial, Helvetica, sans-serif;
	background: #F8F5F2 url(../img/bg.png) repeat-y 58.75% 0;
	color: #666;
}
Jak widać, szerokość procentowa została przypisana do pozycji tła, dzięki temu tło będzie się nam skalować wedle tego wymiaru.

Teraz przejdźmy do zagadnienia dotyczącego skalowania się obrazków względem rozdzielczości. Obrazek, który ma stałą szerokość podaną w CSS, będzie wpływał negatywnie na wygląd strony w przypadku zastosowania elastycznego tła strony. Dlatego wypadałoby, aby jego rozmiar i jego marginesy zawsze dopasowywały się do rozdzielczości urządzenia. W tym celu tworzymy następujacy kod CSS: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

figure {
	float: right;
	width: 41.6667%;
	margin: 0 0 1.875% 1.875%;
	position: relative;
}
img {
	padding: 3px;
	max-width: 100%;
	border: 1px solid #fff;
	background: #fff;
}
figcaption { 
	font-style: italic;
	font-family: Georgia, sans-serif;
	font-size: 12px;
	text-align: center;
}
Jako że, obrazek znajduje się wewnątrz elementu >figure<, to najpierw definiujemy szerokość tego elementu. Na podstawie tak podanej szerokości tego elementu nasz obrazek będzie zawsze przyjmował najwyższą możliwą szerokość i automatycznie odpowiednią wysokość.
Jednak tak samo jak obrazek się dostosowywał do szerokości kontenera >figure< tak i ten kontener może się dostosowywać do szerokości części przetrzymującej główną treść serwisu za pomocą takiego kodu CSS: 
1
2
3
4
5
6
7
8

section, header {
	width: 80%;
	margin: auto;
}
article {
	width: 58.75%;
	float: left;
}

Podsumowanie

W ten sposób osiągnęliśmy pożądany efekt. Szerokość wybranych elementów strony się skaluje względem rozdzielczości ekranu. Jest to fajne rozwiązanie, ale ma też swoje wady, jeśli potrzebujemy również zaoszczędzić na wadze tak utworzonej strony, aby użytkownik niepotrzebnie nie pobierał większej ilości danych.
Aby rozwiązać ten problem, to możemy korzystać z media queries, czyli atrybutów określających style CSS w zależności od zdefiniowanego typu ekranu czy urządzenia.
Będzie to temat jednego z kolejnych wpisów na blogu.
Demo z tego artykułu można sprawdzić tutaj: zmienny rozmiar obrazka i tła w CSS