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
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width"  
  6.         <link rel="stylesheet" href="style.css">  
  7.         <title>Reszponzív elrendezés</title>  
  8.     </head>  
  9.     <body>  
  10.         <div id="view">  
  11.                 <div id="header">  
  12.                     <h1 id="company">Oldal neve</h1>  
  13.                     <ul id="site-nav" class="navigation inline">  
  14.                         <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>  
  15.                     </ul>  
  16.                 </div>  
  17.                 <div id="content">  
  18.                     <h2>Tartalom</h2>  
  19.                     <p>  
  20.                         Donec sit amet suscipit enim, in condimentum quam. Cras condimentum  
  21.                         aliquet mi. Integer tincidunt ornare libero quis aliquet. In  
  22.                         condimentum justo a ultricies eleifend! Sed interdum lorem auctor  
  23.                         eleifend vulputate. Donec aliquam quam lorem, vel mollis purus  
  24.                         adipiscing sed! Sed feugiat sollicitudin lobortis. Pellentesque sed  
  25.                         ultrices diam. Aenean pellentesque purus iaculis elit lacinia; a  
  26.                         viverra augue tincidunt. Ut convallis justo ante, nec consequat  
  27.                         metus consectetur quis. Mauris porta elementum augue non dapibus?  
  28.                         Praesent congue ipsum fringilla lacus tincidunt; ac elementum erat  
  29.                         dictum. Vivamus sed lacus justo! Donec purus lorem, mollis sit amet  
  30.                         dapibus sed, interdum vel tortor.  
  31.                     </p>  
  32.                     <p>  
  33.                         Duis ullamcorper scelerisque libero a tristique. Donec in magna  
  34.                         nunc! Mauris eu erat nulla? Quisque tristique euismod massa sed  
  35.                         sodales! Etiam lacinia leo vel orci ultrices fermentum. Nullam  
  36.                         aliquam lectus dolor, quis porttitor lacus iaculis in. Vivamus  
  37.                         fringilla metus non massa consequat, eget dapibus massa elementum?  
  38.                         Mauris iaculis lacus ac tortor sagittis placerat. Cras euismod enim  
  39.                         non luctus pulvinar! In viverra vitae odio ac facilisis. Fusce neque  
  40.                         dui; malesuada nec quam in, ornare porta mauris? Suspendisse  
  41.                         molestie tellus leo, ut sollicitudin neque adipiscing non.  
  42.                         Suspendisse quis ullamcorper quam. Pellentesque habitant morbi  
  43.                         tristique senectus et netus et malesuada fames ac turpis egestas.  
  44.                         Vestibulum euismod nunc ac dolor fermentum egestas porttitor nec mi.  
  45.                         Duis dictum consequat magna a vestibulum.  
  46.                     </p>  
  47.                     <p>  
  48.                         Nam adipiscing magna ligula, vel vehicula lorem consequat id. Morbi  
  49.                         commodo porta nisi id rhoncus. Curabitur laoreet sem sit amet ante  
  50.                         congue hendrerit. Cum sociis natoque penatibus et magnis dis  
  51.                         parturient montes, nascetur ridiculus mus. Etiam fringilla placerat  
  52.                         mattis. In rutrum tempus nisi id tempor. Nam tristique ipsum ut  
  53.                         lectus tincidunt; at malesuada augue gravida. In interdum auctor  
  54.                         urna et hendrerit. Nunc vitae viverra ipsum. Aliquam ac mauris at  
  55.                         velit lobortis porttitor. Cras in euismod orci. Fusce luctus dui  
  56.                         sapien, eget dictum nunc tempus quis. Nam ut odio a dui vestibulum  
  57.                         tempor quis sit amet mauris. Proin tempor eros pellentesque  
  58.                         dignissim aliquet. Cras interdum adipiscing ipsum eget aliquet.  
  59.                         Nulla ac eros sed tellus porta placerat vitae in ante.  
  60.                     </p>  
  61.                     <p>  
  62.                         Praesent nisi libero, ultrices a ultrices nec, laoreet quis ligula.  
  63.                         Ut nec lacus iaculis, suscipit diam in, congue purus. Integer  
  64.                         tincidunt dignissim sem nec imperdiet. Donec eget facilisis lectus.  
  65.                         Aliquam sodales ac turpis a auctor. Donec vel adipiscing tortor,  
  66.                         vitae volutpat lectus. Aliquam ullamcorper ipsum et lobortis  
  67.                         pulvinar! Donec magna elit, tincidunt in tortor in, interdum  
  68.                         incidunt metus. Duis sollicitudin dolor sapien, eu egestas metus  
  69.                         ultricies sit amet. Cras eros odio, aliquam id placerat quis,  
  70.                         eleifend non nisi. Vestibulum volutpat mauris quis elit ullamcorper;  
  71.                         eu viverra purus aliquet.  
  72.                     </p>  
  73.                     <p>  
  74.                         Sed eget magna at turpis pulvinar suscipit! Fusce auctor, mi in  
  75.                         viverra placerat, erat turpis pulvinar neque, in interdum ligula  
  76.                         purus eget odio. Aenean mollis est id nunc aliquam cursus vitae at  
  77.                         libero. Ut aliquam non eros et facilisis. Integer bibendum mattis  
  78.                         leo quis vehicula. Cras tempor bibendum nisi, ut convallis mauris  
  79.                         congue sed? Nunc rhoncus diam non ante tincidunt, vel egestas tortor  
  80.                         gravida. Mauris id libero a ligula feugiat accumsan at in mi.  
  81.                     </p>  
  82.                 </div>  
  83.                 <div id="sidebar">  
  84.                     <h2>Oldalsáv</h2>  
  85.                     <p>  
  86.                         Donec lacus sem, dictum nec eros non, vulputate sodales massa?  
  87.                         Donec dictum quam sed viverra ullamcorper. Fusce vulputate blandit  
  88.                         est ut rutrum. Aenean eu nisl eu tortor gravida vehicula eget in  
  89.                         ligula? Proin lectus purus, pellentesque et quam in, dignissim  
  90.                         ornare odio. Nam tempor, diam hendrerit sodales consectetur, lectus  
  91.                         ligula consequat velit, id laoreet justo urna quis elit. Suspendisse  
  92.                         adipiscing aliquet volutpat. Etiam tincidunt semper urna, quis  
  93.                         molestie nulla sodales a. Aenean nec lacus elit. Nullam sit amet  
  94.                         quam nisi. Duis bibendum sed mi ut mollis. Proin at vehicula sem,  
  95.                         quis ultricies ligula? Vestibulum non augue id neque congue  
  96.                         tincidunt ac vel quam.  
  97.                     </p>  
  98.                 </div>  
  99.                 <div id="footer">  
  100.                     <h2>Lábléc</h2>  
  101.                 </div>  
  102.         </div>  
  103.     </body>  
  104. </html>  
style.css
  1. /* Alapelrendezés */  
  2.   
  3. #view {  
  4.     margin: 0 auto;  
  5.     max-width: 980px;  
  6. }  
  7.   
  8. #header {  
  9.     width: 100%;  
  10. }  
  11.   
  12. #content {  
  13.     float: left;  
  14.     width: 70%  
  15. }  
  16.   
  17. #sidebar {  
  18.     float: left;  
  19.     width: 30%;  
  20. }  
  21.   
  22. #footer {  
  23.     clear: both;  
  24.     width: 100%;  
  25. }  
  26.   
  27. #header, #content, #sidebar, #footer {  
  28.     padding: 0.5em;  
  29.     -webkit-box-sizing: border-box;  
  30.     -moz-box-sizing: border-box;  
  31.     box-sizing: border-box;  
  32. }  
  33.   
  34. /* Menü elrendezés */  
  35.   
  36. ul.navigation {  
  37.     padding: 0;  
  38.     list-style-type: none;  
  39. }  
  40.   
  41. ul.navigation > li > a {  
  42.     display: inline-block;  
  43.     width: 100%;  
  44.     height: 100%;  
  45. }  
  46.   
  47. ul.navigation.inline > li {  
  48.     display: inline-block;  
  49. }  
  50.   
  51. #site-nav {  
  52.     float: right;  
  53. }  
  54.   
  55. /* Egyebek */  
  56.   
  57. body {  
  58.     background: #fff;  
  59.     color: #333;  
  60. }  
  61.   
  62. a {  
  63.     color: #06c;  
  64. }  
  65.   
  66. #site-nav > li {  
  67.     margin: 1px;  
  68.     background-color: #eee;  
  69.     font-size: 1.4em;  
  70.     -webkit-border-radius: 3px;  
  71.     -moz-border-radius: 3px;  
  72.     border-radius: 3px;  
  73. }  
  74.   
  75. #site-nav > li > a {  
  76.     padding: 0.25em;  
  77.     text-decoration: none;  
  78. }  
  79.   
  80. #footer {  
  81.     text-align: center;  
  82. }  
  83.   
  84. /* Kis felbontásra optimalizálás */  
  85.   
  86. @media screen and (max-width: 600px) {  
  87.       
  88.     #sidebar {  
  89.         display: none; /* vagy float: none; és width: 100%; */  
  90.     }  
  91.       
  92.     #content {  
  93.         float: none;  
  94.         width: 100%;  
  95.     }  
  96.       
  97. }  
  98.   
  99. /* Mobil nézet */  
  100.   
  101. @media screen and (max-width: 480px) {  
  102.       
  103.     #company {  
  104.         display: none;  
  105.     }  
  106.       
  107.     #site-nav {  
  108.         float: none;  
  109.     }  
  110.       
  111.     #site-nav > li {  
  112.         display: block;  
  113.         text-align: center;  
  114.     }  
  115.       
  116. }  
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.