| Autor | Zpráva | ||
|---|---|---|---|
| miropiro Profil |
#1 · Zasláno: 23. 11. 2015, 15:14:47
Dobrý den, už skoro půl dne se lopotím s designem tohoto webu fermentor.net/bootstrap-version/index.php - problém je v místě, kde pod tou sekcí dvakrát tří textů mám dvakrát dva bloky s textem a obrázky. Nějakou dobu jsem si s tím hrál, ale ukázalo se, že dá hodně zabrat, když chci ukočírovat tři samostatné prvky a mít je všechny responsivní...
Tak jsem zkusil vytvořit tabulku pod tím. Ta už mi přijde jako lepší řešení, ale potřebuji zoptimalizovat chování písma, aby se dle velikosti obrazovky zmenšilo a vlastně i ten obrázek k tomu bych potřeboval přizpůsobit...jenže i když jsem nastavil do souboru style.css následující kód .paratablehead{
font-size:15px;
}
.paratable{
font-size:14px;
}a dále @media only screen and (max-width: 400px) { .paratablehead{
font-size:14px;
}
.paratable{
font-size:13px;
}V tuto chvíli to testuji u buňky, ve které je text Filamentous fungus, submerged pellets, mycelium, hyphae, spores... Předem díky za rady, už jsem z toho zoufalý :-( |
||
| Taps Profil |
#2 · Zasláno: 23. 11. 2015, 15:27:16
miropiro:
nebude lepší použít procenta - Velikost písma podle šířky ? |
||
| Tomáš123 Profil |
miropiro:
Responzívne deklarácie sa dávajú na koniec súboru, inak budú prehlušené. To sa deje aj v tvojom prípade. Používaj prieskumník stránok. „A pro obrázek to taky půjde nějak vyřešit?“ Čo? Responzivita? Nastav mu float, clearuj za ním a zbavíš sa toho škaredého poskakovania. (Tiež zbytočne nastavuješ obrovský line-height.) Veľkosť obrázku môžeš meniť ľubovoľne.
|
||
| miropiro Profil |
#4 · Zasláno: 23. 11. 2015, 17:14:53
„Responzívne deklarácie sa dávajú na koniec súboru, inak budú prehlušené.“
To je dobré vědět. Tohle jsem netušil, že existuje takové pravidlo. A platí, že musí být tyto deklarace uspořádané dle velikosti rozlišení nebo je to jedno? Je totiž možné, že jak to mám jinak namíchané, tak proto mi ty experimenty výše (nad tabulkou) nešly moc dobře... |
||
| Tomáš123 Profil |
#5 · Zasláno: 23. 11. 2015, 18:17:36
miropiro:
Ak nebude mať príslušná deklarácia stanovené rozmedzie, hodilo by sa ich aj usporadúvať. Pre lepšie pochopenie, v nasledujúcom príklade bude mať prvok display: inline:
@media and (max-width: 400px) {
prvok {display: block}
}
@media and (max-width: 600px) {
prvok {display: inline}
}Naopak tu, je poradie deklarácii nepodstatné: @media and (max-width: 400px) and (min-width: 200px) {
prvok {display: block}
}
@media and (max-width: 600px) and (min-width: 401px) {
prvok {display: inline}
} |
||
| miropiro Profil |
#6 · Zasláno: 23. 11. 2015, 18:46:08
Tomáš123: Díky, tohle je velmi dobrá připomínka! Mimochodem, zvědavě se zeptám, k čemu je vlastně deklarace "only screen"?
|
||
| Tomáš123 Profil |
#7 · Zasláno: 23. 11. 2015, 19:23:38
|
||
| miropiro Profil |
#8 · Zasláno: 24. 11. 2015, 17:24:07
Tak díky za rady, už se mi to přestalo tak pitomě kotit :) Ale teď mám otázku - pokud bych chtěl, aby od určitého rozlišení obrazovky to už nebyla tabulka dvakrát dva, ale čtyřikrát jedna, jak toho dosáhnout :D ?
|
||
| Tomáš123 Profil |
#9 · Zasláno: 24. 11. 2015, 20:56:19
miropiro:
Záleží od HTML kódu. Ak je riadok daný značkou <tr> a bunka značkou <td> nevhodné zanorenie ti zamedzuje preskladávať štruktúru. Ak tabuľku simuluješ tabuľkovými vlastnosťami displayu, šlo by s tým niečo spraviť.
Konkrétne tvoj prípad (ak som sa pozrel na správnu časť kódu) tabuľku vôbec nevyžaduje. Stačí: iny_prvok { /*Prvok namiesto <td>*/
float: left;
width: 50%;
/*box-sizing: border-box; /*Vhodným prvkom nastavený padding a riadok nie je potrebný */
}<tr> a <table>.
|
||
| miropiro Profil |
#10 · Zasláno: 25. 11. 2015, 11:50:16
Tomáš123: No na tom něco pravdy bude, to bych mohl zkusit, ale třeba pamatovat na to, že to mám vlastně tři elementy, které je třeba nadefinovat a už jsem s nimi strávil pondělní dopoledne :-D Opravdu by to mohlo stačit ;-) ?
|
||
|
Časová prodleva: 8 let
|
|||
0