ugrás a tartalomhoz

Weboldalból responsive, hogyan?

geforce9600gt · 2014. Már. 2. (V), 22.53
Sziasztok

Elkészítek egy weboldalt ugyanúgy mint eddig, tehát nem responsive verzióban.

A kérdésem: utólag át lehet szerkeszteni az oldalt responsive-vá, vagy már egyből úgy kezdjem el készíteni? Gondolom utólag, 1 év után mondjuk már nem lehet átalakítani, vagy csak igen nehezen.


Mutatiok egy példát, itt belinkelem. Katt ide a linkhez

Az enyém igen hasonló felépítésű, és responsive-ban kellene az oldal. Amik ezen a linken ki vannak listázva szálloda ajánlatok, nálam is szinte ugyan így vannak, relativ divek, bennük absolute-al elrendezve a dolgok, kép..

Nézegettem sok bootstrap témát is, de nem igazán találtam hasonlókat. Vagy ha bootstrap-el is csinálnám, abban hogy készítek ilyen diveket, mint amik a linken vannak?

Tudnátok adni ehhez tanácsot, ötleteket? Szerintem csak én gondolok bonyolult dolgokra és közben tök egyszerű az egész. Köszönöm előre is.
‹ easyui grid probléma Űrlap státusz változtatása ›
 ■
1

LESSCSS

Sanyiii · 2014. Már. 2. (V), 23.14
LESS-szel utólag is viszonylag könnyedén át tudod buherálni bootstrap-esre az oldalt. A bootstrap manuálja is elég erős less-ben.
2

Nem tudjuk milyen a HTML

Karvaly84 · 2014. Már. 2. (V), 23.17
Nem tudjuk milyen a HTML oldalad, lehet, hogy csak CSS módosítás kell, de lehet, hogy pár extra tároló elem. Relatív méretezéssel. Amire ez az egész technológia épül tulajdonképpen az a CSS Media Queries. Érdemes hozzá keretrendszert használni, mert az a reszponzivitás mellet egyéb mást is binztosít, pl grid rendszert, űrlap formázást stb...
3

Szia Mit mutassak, hogy

geforce9600gt · 2014. Már. 3. (H), 09.43
Szia

Mit mutassak, hogy pontosabb választ tudj adni nekem? Html-t, vagy css-t is?

És akkor most végülis megcsinálhatom az oldalt ugyan úgy mint eddig, késöbb is lehet responsiva-vá tenni?
4

Szia! annyi, hogy

szabo.b.gabor · 2014. Már. 3. (H), 10.43
Szia!

annyi, hogy elgondolod, hogy egyes részek hogyan alakulnak, ha csökken a szélesség. ha nem használsz táblázatokat, és viszonylag értelmes a markupod, akkor utólag is megoldható css-sel.

állj neki úgy, hogy raksz a body-ra egy mobile class-t és csinálsz egy mobile.css-t amibe elkezded írkálni azokat a plusz szabályokat amik ahhoz kellenek, hogy úgy nézzenek ki a dolgok, ahogy szeretnéd. jó tudom media-queryk.. de így elsőre talán egyszerűbb és érthetőbb.

ha lehet egy személyes jótanácsom, használj em-eket px-ek helyett.
5

Vagy pedig az lesz a legjobb,

geforce9600gt · 2014. Már. 3. (H), 11.27
Vagy pedig az lesz a legjobb, ha egyből ilyenre csinálom, bootstrap-el.

Bootstrap-ben ugye előre definiált class-ok vannak. Ha én mondjuk a menünek másik színt akarok, akkor annak külön saját class, és külön css fájl?
6

csak azért írtam, hogy külön

szabo.b.gabor · 2014. Már. 3. (H), 11.51
csak azért írtam, hogy külön css fájlba írd, hogy ne az alap css fájlodat gányold össze, amíg próbálkozol. amúgy az a jó minél kevesebb css, js, image, stb fájlod van (minél kevesebb http kérés fut)
7

Ha már az oldal kint van a

Karvaly84 · 2014. Már. 3. (H), 14.46
Ha már az oldal kint van a neten, megadhatod pl. a címét.

Egyébként ha a példaként említett layout-ot használod a te oldaladon is akkor annak olyan struktúrát kell alkalmaznia ami alkalmas az oldal reszponzív működésére.

Mire gondolok?

- Az oldalad ne táblázatokra épüljön
- A fejlécben lévő logó ne egy kép legyen, ha mobilon is meg akarod jeleníteni, mert sok helyet foglal a kijelzőn. Legyen háttérként beállítva, amit mobil nézetben egy letisztultabb kisebb felbontásúra cserélhetsz, vagy ha képet szeretnél alkalmazni, betolhatsz mellé egy rejtett elemet egy kisebb változattal, amit megjelenítesz kis felbontáson a nagyot meg elrejted.
- Az ÁFF, Kapcsolat, stb legyen elérhető az oldal alján is (footer), mert amikor kis méretre zsugorodik az oldalad a fejlécben lévő elemeket egymás alá kell float-olnod, és zavaró. Ilyenkor a headerben érdemes csak a menüt megjeleníteni. Ez érvényes pl a reklám blokkokra is, érdemes ezeket is elrejteni (display: none).
- Az oldal sávot célszerű a tartalom alá float-olni.
9

Ez a példa alapján csinálnám

geforce9600gt · 2014. Már. 3. (H), 16.25
Ez a példa alapján csinálnám meg. Megfelelő a célra nem?

8

Egy oldalt reszponzívvá tenni

Hidvégi Gábor · 2014. Már. 3. (H), 14.57
Egy oldalt reszponzívvá tenni nem nagy munka, ami kihívás, hogy a reszponzív dizájnt a mobilos felhasználók elvárásainak megfelelően megtervezzenek hozzá.
10

Össze dobtam egy egyszerű példát

Karvaly84 · 2014. Már. 4. (K), 00.07
A HTML szerkezet és a hozzá tartozó CSS. Teszteld le több felbontáson.

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width"
		<link rel="stylesheet" href="style.css">
		<title>Reszponzív elrendezés</title>
	</head>
	<body>
		<div id="view">
				<div id="header">
					<h1 id="company">Oldal neve</h1>
					<ul id="site-nav" class="navigation inline">
						<li><a href="#">1. Menüpont</a></li><li><a href="#">2. Menüpont</a></li><li><a href="#">3. Menüpont</a></li><li><a href="#">4. Menüpont</a></li><li><a href="#">5. Menüpont</a></li>
					</ul>
				</div>
				<div id="content">
					<h2>Tartalom</h2>
					<p>
						Donec sit amet suscipit enim, in condimentum quam. Cras condimentum
						aliquet mi. Integer tincidunt ornare libero quis aliquet. In
						condimentum justo a ultricies eleifend! Sed interdum lorem auctor
						eleifend vulputate. Donec aliquam quam lorem, vel mollis purus
						adipiscing sed! Sed feugiat sollicitudin lobortis. Pellentesque sed
						ultrices diam. Aenean pellentesque purus iaculis elit lacinia; a
						viverra augue tincidunt. Ut convallis justo ante, nec consequat
						metus consectetur quis. Mauris porta elementum augue non dapibus?
						Praesent congue ipsum fringilla lacus tincidunt; ac elementum erat
						dictum. Vivamus sed lacus justo! Donec purus lorem, mollis sit amet
						dapibus sed, interdum vel tortor.
					</p>
					<p>
						Duis ullamcorper scelerisque libero a tristique. Donec in magna
						nunc! Mauris eu erat nulla? Quisque tristique euismod massa sed
						sodales! Etiam lacinia leo vel orci ultrices fermentum. Nullam
						aliquam lectus dolor, quis porttitor lacus iaculis in. Vivamus
						fringilla metus non massa consequat, eget dapibus massa elementum?
						Mauris iaculis lacus ac tortor sagittis placerat. Cras euismod enim
						non luctus pulvinar! In viverra vitae odio ac facilisis. Fusce neque
						dui; malesuada nec quam in, ornare porta mauris? Suspendisse
						molestie tellus leo, ut sollicitudin neque adipiscing non.
						Suspendisse quis ullamcorper quam. Pellentesque habitant morbi
						tristique senectus et netus et malesuada fames ac turpis egestas.
						Vestibulum euismod nunc ac dolor fermentum egestas porttitor nec mi.
						Duis dictum consequat magna a vestibulum.
					</p>
					<p>
						Nam adipiscing magna ligula, vel vehicula lorem consequat id. Morbi
						commodo porta nisi id rhoncus. Curabitur laoreet sem sit amet ante
						congue hendrerit. Cum sociis natoque penatibus et magnis dis
						parturient montes, nascetur ridiculus mus. Etiam fringilla placerat
						mattis. In rutrum tempus nisi id tempor. Nam tristique ipsum ut
						lectus tincidunt; at malesuada augue gravida. In interdum auctor
						urna et hendrerit. Nunc vitae viverra ipsum. Aliquam ac mauris at
						velit lobortis porttitor. Cras in euismod orci. Fusce luctus dui
						sapien, eget dictum nunc tempus quis. Nam ut odio a dui vestibulum
						tempor quis sit amet mauris. Proin tempor eros pellentesque
						dignissim aliquet. Cras interdum adipiscing ipsum eget aliquet.
						Nulla ac eros sed tellus porta placerat vitae in ante.
					</p>
					<p>
						Praesent nisi libero, ultrices a ultrices nec, laoreet quis ligula.
						Ut nec lacus iaculis, suscipit diam in, congue purus. Integer
						tincidunt dignissim sem nec imperdiet. Donec eget facilisis lectus.
						Aliquam sodales ac turpis a auctor. Donec vel adipiscing tortor,
						vitae volutpat lectus. Aliquam ullamcorper ipsum et lobortis
						pulvinar! Donec magna elit, tincidunt in tortor in, interdum
						incidunt metus. Duis sollicitudin dolor sapien, eu egestas metus
						ultricies sit amet. Cras eros odio, aliquam id placerat quis,
						eleifend non nisi. Vestibulum volutpat mauris quis elit ullamcorper;
						eu viverra purus aliquet.
					</p>
					<p>
						Sed eget magna at turpis pulvinar suscipit! Fusce auctor, mi in
						viverra placerat, erat turpis pulvinar neque, in interdum ligula
						purus eget odio. Aenean mollis est id nunc aliquam cursus vitae at
						libero. Ut aliquam non eros et facilisis. Integer bibendum mattis
						leo quis vehicula. Cras tempor bibendum nisi, ut convallis mauris
						congue sed? Nunc rhoncus diam non ante tincidunt, vel egestas tortor
						gravida. Mauris id libero a ligula feugiat accumsan at in mi.
					</p>
				</div>
				<div id="sidebar">
					<h2>Oldalsáv</h2>
					<p>
						Donec lacus sem, dictum nec eros non, vulputate sodales massa?
						Donec dictum quam sed viverra ullamcorper. Fusce vulputate blandit
						est ut rutrum. Aenean eu nisl eu tortor gravida vehicula eget in
						ligula? Proin lectus purus, pellentesque et quam in, dignissim
						ornare odio. Nam tempor, diam hendrerit sodales consectetur, lectus
						ligula consequat velit, id laoreet justo urna quis elit. Suspendisse
						adipiscing aliquet volutpat. Etiam tincidunt semper urna, quis
						molestie nulla sodales a. Aenean nec lacus elit. Nullam sit amet
						quam nisi. Duis bibendum sed mi ut mollis. Proin at vehicula sem,
						quis ultricies ligula? Vestibulum non augue id neque congue
						tincidunt ac vel quam.
					</p>
				</div>
				<div id="footer">
					<h2>Lábléc</h2>
				</div>
		</div>
	</body>
</html>
style.css

/* Alapelrendezés */

#view {
	margin: 0 auto;
	max-width: 980px;
}

#header {
	width: 100%;
}

#content {
	float: left;
	width: 70%
}

#sidebar {
	float: left;
	width: 30%;
}

#footer {
	clear: both;
	width: 100%;
}

#header, #content, #sidebar, #footer {
	padding: 0.5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Menü elrendezés */

ul.navigation {
	padding: 0;
	list-style-type: none;
}

ul.navigation > li > a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

ul.navigation.inline > li {
	display: inline-block;
}

#site-nav {
	float: right;
}

/* Egyebek */

body {
	background: #fff;
	color: #333;
}

a {
	color: #06c;
}

#site-nav > li {
	margin: 1px;
	background-color: #eee;
	font-size: 1.4em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#site-nav > li > a {
	padding: 0.25em;
	text-decoration: none;
}

#footer {
	text-align: center;
}

/* Kis felbontásra optimalizálás */

@media screen and (max-width: 600px) {
	
	#sidebar {
		display: none; /* vagy float: none; és width: 100%; */
	}
	
	#content {
		float: none;
		width: 100%;
	}
	
}

/* Mobil nézet */

@media screen and (max-width: 480px) {
	
	#company {
		display: none;
	}
	
	#site-nav {
		float: none;
	}
	
	#site-nav > li {
		display: block;
		text-align: center;
	}
	
}
11

Box-sizing helyett

Szuperjég · 2014. Már. 4. (K), 01.02
Box-sizing helyett alternatívaként használnátok már a CSS3 calc() funkciót?
12

Én nem szoktam, de jó is hogy

bamegakapa · 2014. Már. 4. (K), 01.18
Én nem szoktam, de jó is hogy mondod, rég néztem rá. A böngészők elég bíztató arányban támogatják.

Úgy látom, a régi Androidok jó része bukja a dolgot, csak a 4.4 tudja, régi iPhone-ok se értik, tehát a mobilnézetben kilőve a calc(), legalábbis szerintem.

Viszont asztali nézetben simán lehetne használni, úgy látom. A régi IE-k kapnak valami más megoldást conditional stylesheetben, vagy expression() hekkelés, vagy valami alternatív layout :).

Lehet elgondolkozom rajta a következő projektben.
13

Az előttem szóló el is

Karvaly84 · 2014. Már. 4. (K), 01.55
Az előttem szóló el is mondta, hogy miért nem használnám. Majd ha több támogatást élvez.
14

Jóreggelt Végül maradtam a

geforce9600gt · 2014. Már. 4. (K), 09.54
Jóreggelt

Végül maradtam a bootstrap-nél. Olyan kellene nekem, hogy divek listázásra módszerek, sablonok..például hírek kilistázása. Tudnátok linkelni ilyen demo oldalakat? Köszönöm
16

Attól tartok most nem értem

Karvaly84 · 2014. Már. 4. (K), 23.38
Attól tartok most nem értem mire gondolsz.
15

A konkrét esetben például

Szuperjég · 2014. Már. 4. (K), 11.35
A konkrét esetben például lehetne fallback-nek %-os margót és szélességet használni, majd a margót is és szélességet is calc segítségével megadni.
De valójában még önmagában a %-os margós megoldást is természetesebb megoldásnak érzem, mint a box-sizing technikát, mivel megmaradnak az arányok, de végsősoron nincs akkora jelentősége, tényleg attól függ mi a cél.