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ó

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 }
}

122 hozzászólás

  1. 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.

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

      Valahonnan neki is meg kellett tanulnia 🙂

  2. 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??

    • 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. 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. 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…?

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

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

  5. 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ö…

    • 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. 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. 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. 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!

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

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

  9. 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. 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. 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

    • 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. 2014. május 23. péntek - 21:24

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

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

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

  13. 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? 🙂

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

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

  14. 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

    • 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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...