A látogatók többsége telefonon nézi meg a webhelyedet. A Remake egyetlen tervet használ minden képernyőn, és hagyja, hogy a kisebb eszközökre is beállítsd.
Frissítve:
Az eszközmenü az eszköztárban található. Négy lehetősége van:
Asztali az alapértelmezett. A stílusai minden képernyőn érvényesek, hacsak egy kisebb eszköz felül nem írja őket.
Táblagép 1024 pixel alatti szélességen érvényes.
Mobil fekvő 768 pixel alatti szélességen érvényes.
Mobil álló 640 pixel alatti szélességen érvényes.
A menü a legnagyobb képernyőtől a legkisebbig halad, a stílusok pedig fentről lefelé érvényesülnek. Az Asztali nézetben beállított stílus minden képernyőn érvényes. A Táblagépen beállított stílus a táblagépre és mindkét mobilméretre érvényes. A Mobil fekvőn beállított stílus mindkét mobilméretre érvényes. A Mobil állóban beállított stílus csak a legkisebb telefonokra érvényes.
Egy kisebb eszköz felülírhat egy nagyobbat, de egy nagyobb eszköz nem írhat felül egy kisebbet.
Ez az ellenkezője a máshol látott mobile-first megközelítésnek. Illik ahhoz, ahogy a Remake-ben építkezel: először a teljes tervet készíted el, aztán igazítod a kisebb képernyőkhöz.
Egy címsor például 48 pixel lehet Asztali nézetben, 36 pixel Táblagépen és 28 pixel Mobil állóban. Mindegyik méret a felette lévőt örökli, amíg át nem írod.
Kezdd az asztali tervvel. Aztán válts egy kisebb eszközre, és csak azt módosítsd, amit muszáj.
A sorok kis képernyőn egymás alá rendezik az oszlopaikat, így a kéthasábos elrendezés telefonon egyhasábossá válik. Az oszlopok sem erőltetik a szélességüket, hanem hagyják, hogy a tartalom kitöltse a helyet.
Ez azt jelenti, hogy nem kell minden elrendezést újraépítened mobilra. Leginkább a térközöket, a betűméreteket és a képeket kell átnézned.
Válts Mobil állóra, és próbáld ki ezeket:
Csökkentsd a nagy címsorokat.
Csökkentsd a szekciók belső margóját.
Tedd teljes szélességűvé a gombokat, ha nehéz eltalálni őket.
Cseréld le a díszítőképet egy olyanra, ami jobban illik a kisebb helyhez.
Ha valamit kiveszel, hogy legyen hely, győződj meg róla, hogy nélküle is van értelme az oldalnak.
Egy címsor, ami asztali gépen ütősnek tűnik, telefonon elnyomhat mindent. Jelöld ki a címsort, válts Mobil állóra, és állíts be kisebb méretet.
Ugyanezt tedd a hosszú bekezdésekkel is, ha szűknek érzed a szöveget. A szövegtörzs maradjon olvasható nagyítás nélkül.
Az asztali belső margó telefonon gyakran túl bőkezű. Válts Mobil állóra, és csökkentsd a szekciók és kártyák belső margóját.
Hagyj elég helyet a gombok és hivatkozások körül. Egy szűk koppintási felület idegesítő.
A képek a tárolójukkal együtt méreteződnek. Nézd meg, hogy a kép fontos része a kivágás után is látszik-e.
Ha egy széles banner elveszíti a témáját mobilon, használj más képet a mobil elrendezéshez, vagy tedd a témát közelebb a középhez.
Az eszközmenü melletti állapotmenüvel a hover állapotot formázhatod. Érintőképernyőn nincs hover, ezért soha ne tedd a fontos információt kizárólag hover állapotba.
A hovert apró színváltozáshoz vagy kiemelkedő árnyékhoz használd. Ne vele jeleníts meg olyan menüt, amit koppintással nem lehet megnyitni.
Ugyanazzal az állapotmenüvel azt is beállíthatod, hogyan nézzen ki egy hivatkozás, ha az aktuális oldalra mutat. Válaszd az Aktuális oldal lehetőséget, majd alkalmazd a stílust: például current:underline vagy current:text-brand-600.
Az egyezés pontos, a lekérdezési karakterláncot figyelmen kívül hagyja. A /blog akkor aktuális, ha az útvonal /blog vagy /blog?page=2, de a /blog/post esetén nem. A más webhelyekre mutató, valamint a mailto: és tel: hivatkozások soha nem egyeznek, így egy máshová mutató menüpont véletlenül sem lesz kiemelve.
A publikált oldal a szabványos aria-current="page" attribútummal jelöli a hivatkozást, így JavaScript nélkül is működik, az exportált statikus oldalakon is. A szerkesztő vászna ugyanezt az állapotot mutatja a tervezés közben.
A szerkesztő vászna nem telefon. Méretezd át a böngészőablakot, hogy lásd a szűk elrendezést, aztán nyisd meg a publikált webhelyet egy igazi telefonon.
Nézd meg:
A menü kinyílik és becsukódik.
Az űrlapokat könnyű kitölteni.
A gombok elég nagyok ahhoz, hogy eltaláld őket.
A szöveg nem lóg ki és nem vágódik le.
A képeken továbbra is a megfelelő téma látszik.
Építsd meg az oldalt Asztali nézetben.
Válts Táblagépre, és javítsd a szembetűnő zsúfoltságot.
Válts Mobil állóra, és csökkentsd a címsorméreteket meg a belső margókat.
Igazítsd a hézagot vagy a térközt minden sorban, ami még szűknek tűnik.
Méretezd át a böngészőablakot, és ellenőrizd a szűk elrendezést.
Publikáld, és nézd meg az élő oldalt egy igazi telefonon.
A térközök vezérlését A Doboz fül mutatja, a betűméretekről a Szöveg és betűtípusok oldalon olvashatsz.
Ha saját osztályokat írsz, ugyanezeket a max-lg:, max-md: és max-sm: előtagokat használd. A szintaxisról az Egyedi osztályok (haladó) oldalon olvashatsz.
Weboldalépítő, ami úgy működik, mint egy dokumentum. A CMS, az űrlapok és az EU-s tárhely mind adott.
© 2026 Remake. Minden jog fenntartva.
