Reszponzív töréspontok beállítása

Reszponzív töréspontok

Amennyiben olyan weblapot építünk, ami nem csak egy méretű eszközön használható, oda kell figyelni, hogy különböző méreteken megfelelően jelenjen meg a tartalom. Ez sok esetben azt jelenti, hogy nem ugyanúgy jelenik meg.

Tipikus méret tartományok:

• mobil
  • bármi 500-600 pixel szélesség alatt
• tablet
  • 500-600 pixel és 900-1000 pixel szélesség között
• desktop
  • bármi 900-1000 pixel szélesség felett

A gyakorlatban ezeket a méret tartományokat tovább szoktuk bontani, mivel még ez a 3 méret sem elég arra, hogy jól jelenjen meg a tartalom a weblapon minden méreten.

Javasolt töréspontok

A Webb & Flow a Bootstrap töréspontjait használja a weblap építés során, kiegészítve az esetleges nagyon kicsi mobil, és nagyon nagy desktop méretekkel.

Az xxs és xxl méreteket el lehet hagyni, vagy szükség esetén más méreteken definiálni, illetve akár még tovább bontani (például szükség lehet az xxl felett még a 4k felbontásra is).

Amennyiben a weblap nem a Bootstrap-et használja, mint CSS keretrendszer, akkor annak a rendszernek a töréspontjait kell felvinni, amit a weblap használ. Amennyiben teljesen egyedi CSS kód készült, azokat kell felvinni, amik a CSS kódban meg vannak valósítva.

Töréspontok beállítása

Lásd: Súgó / Config / Portal Config / Breakpoints

Töréspontok használata

A töréspont beállításokat a ConyCMS több funkciónál is használja:

Landing Builder

A Landing Builder-ben a grid felépítésekor minden előre beállított mérethez meg lehet adni, hogy az adott oszlop melyik méreten hány grid szélességű legyen.

Tartalom szerkesztő előnézet

A tartalom szerkesztő előnézet funkciója az előre felvitt teszt méreteken, valamint kézzel pontosan megadott méreten is meg tudja jeleníteni a weblapot, hogy még a publikálás előtt ellenőrizni lehessen, hogy hogy fog kinézni.

Template specifikus CSS fájlok generálása

Azért, hogy ne legyen minden aloldalon és minden méreten az összes CSS kód behívva, szét lehet kisebb egységekre bontani azt oldal típus vagy komponens és méret szerint, ezeket után a template-eknél be lehet állítani a megfelelő méretekhez a megfelelő CSS fájlokat, amiket a ConyCMS automatikusan összefűz, és behív a megfelelő méreteken.

Automata kép átméretezés

A ConyCMS a tartalom folyószöveg részébe illesztett képeit automatikusan át tudja méretezni, amennyiben ez be van az adott tartalom template-jében állítva. A beállításoknál a portálban megadott töréspontokra lehet meghatározni, hogy az adott méreten mekkora legyen a kép.