Mérei Tamás webdesigner

Tutorial: responsive webdesign alapok

Szerző:   |   2012-11-03

Meglepődve tapasztaltam, hogy ismét tudok hosszú videókat feltölteni a YouTube-ra, úgyhogy végre nem kell darabolnom. Ennek örömére készítettem egy hosszabb anyagot a reszponzív weboldaltervezés alapjairól.

A videóban elkészített oldalt ide kattintva tudod megnézni.

Videó

HTML forráskód


<div id="wrapper">
	<header>
		Responsive <span>Webdesign</span>
	</header>
	<nav>
		<a href="">elso</a> •
		<a href="">masodik</a> •
		<a href="">harmadik</a> •
		<a href="">negyedik</a>
	</nav>
	<section>
		<article>
			<h1>Lorem ipsum</h1>
			<figure>
				<img src="1.jpg" alt=""/>
				<figcaption>
					kep leirasa par szoban...
				</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie augue et nisl scelerisque nec consectetur est pharetra. Fusce imperdiet luctus justo, in sodales ante accumsan et. Vestibulum arcu sapien, aliquam ac porta ac, pellentesque id nibh. Pellentesque ut enim sed eros condimentum condimentum. Vivamus erat nisi, consectetur vitae gravida at, porttitor non diam. Proin non mauris eu felis sagittis tincidunt. Mauris eget elit arcu. Ut lectus magna, venenatis ac placerat vel, sodales ut sapien.</p>
		</article>
		<article>
			<h1>Lorem ipsum</h1>
			<figure>
				<img src="2.jpg" alt=""/>
				<figcaption>
					kep leirasa par szoban...
				</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie augue et nisl scelerisque nec consectetur est pharetra. Fusce imperdiet luctus justo, in sodales ante accumsan et. Vestibulum arcu sapien, aliquam ac porta ac, pellentesque id nibh. Pellentesque ut enim sed eros condimentum condimentum. Vivamus erat nisi, consectetur vitae gravida at, porttitor non diam. Proin non mauris eu felis sagittis tincidunt. Mauris eget elit arcu. Ut lectus magna, venenatis ac placerat vel, sodales ut sapien.</p>
		</article>
	</section>
	<aside>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas erat est, faucibus sit amet adipiscing ut, mattis in felis. Mauris metus mi, molestie non dignissim a, aliquam ut elit. In in lorem nisl, nec porta nunc. Vivamus vitae ullamcorper eros. Fusce sed sapien euismod lacus faucibus egestas ut a felis. Vivamus porta neque nec turpis porta sed semper enim hendrerit. Quisque ut est sem. Aenean in suscipit lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus elementum metus in diam tincidunt accumsan. Sed vitae est dapibus massa sollicitudin iaculis id non dui. Proin ut tellus quis sem tincidunt consectetur. Aenean in ullamcorper lorem.
	</aside>
	<div class="clear"></div>
</div>
<footer>
	<a href="">elso</a>
	<a href="">masodik</a>
	<a href="">harmadik</a>
	<a href="">negyedik</a>
</footer>

CSS forráskód


* { padding: 0; margin: 0; border: 0 }
body {
	background: url('bg.png') #ab5927;
	font-family: arial;
	font-size: 100%;
	color: #f0c9b1
}
a { color: #FFB400; }
div.clear { clear: both; }

div#wrapper {
	width: 800px;
	margin: 20px auto;
	border-radius: 10px
}
header {
	font-size: 360%;
	font-weight: bold;
	color: #fff;
	font-family: "trebuchet MS";
	text-shadow: 2px 2px 2px #6d2a15
}
header span { color: #000 }
footer {
	width: 760px;
	margin: 20px auto;
	font-size: 85%;
	background: rgba(129,63,21,0.5);
	padding: 20px;
	text-align: center
}
footer a { margin: 0 15px; }
nav {
	padding: 10px 0;
	margin: 20px 0;
	color: #000;
	box-shadow: 0px 0px 5px #6d2a15;
	background: #ffb400;
	background: -moz-linear-gradient(top,  #ffb400 0%, #ff8500 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb400), color-stop(100%,#ff8500));
	background: -webkit-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: -o-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: -ms-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: linear-gradient(to bottom,  #ffb400 0%,#ff8500 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb400', endColorstr='#ff8500',GradientType=0 );
}
nav a {
	color: #000;
	text-decoration: none;
	margin: 0 10px;
	font-family: "trebuchet MS"
}
nav a:first-child { margin-left: 20px }
nav a:hover { text-decoration: underline }
section {
	width: 558px;
	float: left;
	margin: 0 20px 0 0;
	padding: 0 20px 0 0;
	font-size: 80%;
	border-right: 2px dotted #c57240
}
section article { margin: 0 0 20px 0 }
section article p {
	text-align: justify;
	line-height: 140%
}
section article h1 {
	margin: 0 0 10px 0;
	font-size: 150%;
	color: #ffb400;
	font-family: "trebuchet MS";
	text-shadow: 1px 1px 1px #6d2a15
}
aside {
	float: right;
	width: 200px;
	font-size: 80%
}
figure {
	padding: 10px;
	background: #c57240;
	margin: 0 0 20px 0
}
figure img { max-width: 100% }
figure figcaption {
	font-style: italic;
	font-size: 80%;
	margin: 6px 0 0 0
}
@media only screen
and (min-width : 480px)
and (max-width : 800px) {
	div#wrapper { width: 600px }
	header { font-size: 320% }
	section { width: 408px }
	aside { width: 150px }
	footer { width: 560px }
}
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
	div#wrapper { width: 400px; }
	header { font-size: 200%; }
	section { width: 400px; padding: 0; margin: 0; border: 0 }
	aside { display: none }
	footer { width: 360px }
}
@media only screen
and (min-width: 240px)
and (max-width: 320px) {
	div#wrapper { width: 300px; }
	header { font-size: 200%; text-align: center }
	header span { display: block }
	nav { text-align: center }
	nav a { margin: 0 3px }
	nav a:first-child { margin: 0 3px }
	section { width: 300px; padding: 0; margin: 0; border: 0 }
	aside { display: none }
	footer { display: none }
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

122 hozzászólás

  1. Patrik
    2017. május 14. vasárnap - 23:13

    Szia!
    Anno tőled tanultam sokmindent, többek között a reszponzív webdesign alap felépítését, ezúton is köszi ezeket.
    Infós szakgimibe járok, épp html és css a téma, az alapok vége felé járunk. Egyik órán a reszponzív webdesignról volt szó, tökre örültem, hogy már ez is alap tananyag, viszont az, hogy a tanár az ebben a tutoriálban létrehozott oldalt mutatta be, mint saját munkája. Vicces volt, de végül nem szóltam neki, hogy én tudok erről 😀
    Szóval köszi mégegyszer ezeket a videókat, leírásokat, látod, már az iskolákban is hasznát veszik.
    Üdv.

    • cyrex
      2017. május 15. hétfő - 07:03

      Valahonnan neki is meg kellett tanulnia 🙂

  2. Gábor
    2017. március 5. vasárnap - 22:23

    Helló cyrex!
    Még nagyon kezdő vagyok, de érdekel engem ez a webdesigner munka, és az a kérdésem, hogy ha már megtanultam mindent, akkor honnét fogom tudni, hogy kinek kell weboldalt készítenem??

    • cyrex
      2017. március 6. hétfő - 16:15

      Ha jó vagy akkor megtalálnak a munkák. Inkább az a kérdés, hogy honnan tudod azt, hogy kinek NEM szabad munkát elvállalni. Ehhez kell pár év tapasztalat és némi tanulópénz 🙂

  3. Tücsöklazsi
    2016. január 14. csütörtök - 15:19

    Kedves Tamás!

    Ha egy lelkes kezdő klaviatúrájából származó “RESPECT!” ér valamit, mást nem is fűznék a munkáidhoz…
    Ja de mégis: Nagyon szépen köszönöm!!! Az eddigieket, ezt és a továbbiakat is!

    Üdv:
    Józsi

  4. Tot Tivadar
    2015. december 14. hétfő - 15:25

    Még egy dolog, PS, újragondolom, hogyan készitsem el azt az internetes oldalt, amit pár napja kezdtem. És még egy kérdés, a normalizer.css filet érdemes-e használni, vagy…?

    • cyrex
      2016. január 19. kedd - 14:25

      Használhatod, nem rossz az, a Bootstrap-ben pl. alapból benne van.

  5. Tot Tivadar
    2015. december 14. hétfő - 14:56

    Hát ez tökéletes, az alapokat tanultam meg, amiröl azt hittem, hogy a bootstrapban megtanulom vagy megoldom, azért lenne egy kérdésem, gond-e az, ha a beállitásokat keverem a bootstrappal? Lényegében ott elég sokminden már elöre meg van oldva, viszont, ahogy észrevettem, az !important-al felül lehet irni bizonyos elöre elkészitett “stylokat”. Még egy dolog, a responsive töréspontokra van-e valami alap, ami általában jó minden mobilra, tabletre, vagy valóban huszon-, harminc-valahány beállitást kell csinálni mindenre, hogy igazán jó legyen. Ez a responsive kitaláció rengeteg idöt elvesz a programozásban, ami lényegében ár szempontjából nagyon jó, de idö-pénz arányában még lehet, hogy nem megfelelö…

    • cyrex
      2016. január 19. kedd - 14:29

      A bootstrap egy alap, aztán, hogy abból mit használsz fel, mit írsz felül, teljesen mindegy. Vannak előre megírt töréspontgyűjtemények, de, ha használsz valamilyen grid rendszert és százalékokban adod meg a szélességeket, akkor azért nincs szükség olyan sokféle töréspontra általában.

  6. Guszti
    2015. november 7. szombat - 21:58

    Kedves cyrex,
    Kérdésem az nincs, mindösszesen megakarom köszönni a videókat, nagyon jól, érthetően mondasz el mindent, zseniális! 😀 Többet többet többet csak ennyit tudok mondani. Öröm a videóidból tanulni. Köszönettel 🙂

  7. Bán Zsolt
    2015. augusztus 17. hétfő - 11:00

    Azt hiszem, a lenyűgöző a legjobb szó! Köszönöm szépen!
    Sokat tanultam! Köszi, köszi, köszi!
    Még… még… még…. (ha lehet 🙂 )

  8. Milvius Attila
    2015. június 26. péntek - 08:02

    Hello! Olyan problémába ütköztem, hogy a @media only screen parancsokat nem érzékeli a Sublime text 3. Korábbi css fájlokat betöltöttem a programba, amik tartalmazzák a reszponzivitást, és tökéletesen működnek a hozzájuk rendelt html-ben. Mi lehet a megoldás?
    Köszönöm!

    • cyrex
      2015. július 17. péntek - 15:48

      Mi az, hogy nem érzékeli? Nincs syntax highlighting vagy mi a gond?

  9. Évi
    2014. augusztus 4. hétfő - 12:38

    Kedves Tamás!
    Ez is nagyon sokat segített! Köszi!
    (Nekem sem megy az Opera-val.)

  10. Adam
    2014. június 26. csütörtök - 22:05

    Köszi az információt, eddig nem pontosan értettem mikor kell “” és mikor nem, de most már azt hiszem értem.

  11. Árpád
    2014. június 4. szerda - 21:54

    Szia!

    Hasznos volt a videó, köszönöm!

    A kérdésem az az, hogy van egy sliderem, azt hogyan tudom reszponzívvá tenni? Tehát egy js fájlt hogyan tudok mobilra optimalizálni?

    Köszönöm,

    Árpád

    • cyrex
      2014. június 16. hétfő - 11:14

      A CSS a lényeg, abban kell megoldani, hogy reszponzív legyen, nem a JS-ben.

  12. Hoshi(egy lelkes kezdő)
    2014. május 23. péntek - 21:24

    Adj órákat nekem kééééérlek… 😀

    • cyrex
      2014. május 28. szerda - 22:39

      Itt vannak az órák videók formájában a blogon 🙂

  13. Robert Herold
    2014. május 1. csütörtök - 22:07

    Üdv,

    Köszi a videót! Nagyon hasznos volt! 🙂 Kedvet is kaptam kipróbálni, egy teszt oldallal:
    http://robertherold.net/konyha/

    Viszont a 240 és 320 közti legördülő navigációval nagyon szenvedtem! 🙁 Igaz, h az nincs a tutorial-ban, de mindenképp ki szerettem volna próbálni azt is, de nem találtam erre “szakosodott” scriptet… azaz de… millió van fent guglin “responsive menu” alatt, de mind agyon van stílusozva, úgyhogy egy régi animated collapse állt a rendelkezésemre, amit ha összecsuktam, akkor az összes többi felbontásból is eltűnt a menüm…
    Aztán kaptam egy kis segítséget a prog.hu-n, hogy 321px felett, display:block-kal mindig megjelenik a menüm… ez állítólag nem valami szép megoldás, de egyszerűen nem találtam normálisan használható responsive menu-t…

    Esetleg várható egy ilyen tutorial is? 🙂

    • cyrex
      2014. május 28. szerda - 19:21

      Lesz mindenképpen, most éppen ez van a fejemben.

  14. ndrew
    2014. április 25. péntek - 00:19

    Kedves Tamás!

    Köszönöm a reszponzív tutorialt.
    Nagyon hasznos anyag volt.
    Egy probémám van, hogy pl opera böngészővel nem megy az átméretezés.
    Van esetleg erre valami script vagy egyéb megoldás?

    Köszönettel:
    András

    • cyrex
      2014. április 25. péntek - 07:58

      Lesz majd másik ilyen videó, ez már elég régi és elavult 🙂

Hozzászólás

Legújabb hozzászólások