| Autor | Zpráva | ||
|---|---|---|---|
| gottax Profil |
#1 · Zasláno: 13. 7. 2016, 09:24:32
Dobrý den, prosím o radu. Jsem úplný začátečník a už asi týden zkouším u tohoto webu: www.stehujemeprahu.cz dostát všem podmínkám googlu, tak aby web prošel testem pro použitelnost v mobilech. Pročetl jsem diskuze zde i na jecas.cz, zkoušel jsem do kodu pridat jak viewport s ruznymi scale, tak misto pevnych sirek pridelit divum a img max procenta, ale stejně se mi nedaří :-( v tom kodu je neco spatne a ja bohuzel nevim co..mozna vse:-)
|
||
| Tomáš123 Profil |
#2 · Zasláno: 13. 7. 2016, 09:45:13
gottax:
„už asi týden zkouším dostát všem podmínkám googlu“ Responzivita sa nerobí podľa Googlu. Tá tvoja napríklad vôbec nefunguje. Preskladávaj bloky tak, aby sa pri žiadnej šírke zobrazovacej plochy nemusel ukázať horizontálny posuvník. Dbaj o to, aby boli medzi skupinou odkazov (stránkovania a podobne) dostatočne veľké medzery, aby bolo písmo dobre čitateľné (aj za menšieho jasu), aby web neobsahoval príliš obrovské obrázky, ktoré užívateľ mobilného zariadenia s pomalým alebo plateným pripojením nechce sťahovať... Viď: Převod webu na responsivní design |
||
| gottax Profil |
#3 · Zasláno: 13. 7. 2016, 10:00:18
gottax [#1], Tomáš123 [#2]: ahoj, děkuju za odpoved, ale jak rikam, moc tomu nerozumim, obecne poucky o velikosti a sirce bloku a dostatecne vzdalenosti ovladacich prvku od sebe jsem uz nasel na google napovede, problem je ze nevim, jak to technicky zapsat do kodu,. nenasel by se tady nekdo kdo by mi konkretne pomohl se zapisem kodu? vim, ze to je asi tady nestandardni pozadavek.
|
||
| Tomáš123 Profil |
#4 · Zasláno: 13. 7. 2016, 12:38:59
gottax:
Je to celkom jednoduché. Zistíš si, pri akej šírke okna sa ti web začína nevchádzať do zobrazovacej plochy. Túto hodnotu potom použiješ pri @media deklarácii:
@media screen and (max-width: 800px) and (min-width: 400px) {
/* Kód v tomto bloku sa aplikuje vtedy, ak bude šírka zobrazovacej plochy v rozmedzí od 400 do 800px. */
}Väčšinou sa oplatí dolné hranice neudávať, aby sa web buď nerozpadol mimo stanovený limit späť do pôvodnej podoby alebo, aby si sa nemusel opakovať, ak chceš mať napríklad dva stĺpce pod sebou: @media screen and (max-width: 800px) {
.stlpec {float: none;}
.stranka {color: red;}
}
@media screen and (max-width: 400px) {
.stlpec {margin: .5em;} /* Pričom, keďže šírka zobrazovacej plochy napríklad 320px je súčasne menšia ako 400px aj 800px, aplikuje sa na prvok s triedou stĺpec aj zrušenie obtekania. */
}Takto môžeš pre určitý rozsah rozlíšení pripraviť prispôsobenú verziu webu. Na pochopenie je myslím dosť dôležité vedieť, ako @media deklarácie vidí prehliadač.
|
||
|
Časová prodleva: 8 let
|
|||
0