Breakpointi

Spletna stran ima širino strani 990 px. Katere breakpointe je najbolje določiti, da bo stran dobro odzivna in vidna na telefonu (pokončno in ležeče) ter tablici (ležeče) ?

Čisto odvisno od postavitve elementov. Poglej katere širine so "kritične" - pri katerih širinah so elementi preveč nakopičeni/preozki in glede na to določi breakpointe. Veliko ne moreš zgrešiti če jih skopiraš iz kakšnega frameworka (Bootstrap, Foundation, Skeleton...). Neke univerzalne rešitve, ki bi bila odlična v vseh primerih žal ni.

Te brakepointe bi mogu že prej nastavit, v obratni smeri je zadevo težje speljat. Sicer pa brakepoints od bootstrapa so čisto ok, pač pokrijejo večino naprav in to je pa tudi to.

Sam ponavadi najprej preverim najbolj pogoste ločljivosti obiskovalcev in na podlagi tega določim breakpointe:

1. Desktop

- min 1024px ali min 1280px

2. Tablice

- max 960px (občasno)

- max 800px

- max 768px

3. Mobilci

- min 480px in max 640px

- min 320px in max 480px

če se pa že prej vse lepo zloži pa:

• max 480px


• max 320px

Včasih je treba narediti več breakpointov + switche (landscape, portrait), včasih pa le nekaj - odvisno od zasnove dizajna strani in postavitve elementov ter ločljivosti obiskovalcev. Primer uporabe breakpointov.

Če je stran že končana, potem pomeni, da greš od "desktop" verzije v smeri "mobile". Enostavno okno brskalnika ožaš in kjer se pojavi problem narediš break point v smislu max[kritična-točka].