| Autor | Zpráva | ||
|---|---|---|---|
| Jakub Rychlý Profil |
Zdravím,
mám dotaz...jak nastavím aby se mi v mobilní verzi nastavil jako header jeden obrázek a v klasické verzi druhý obrázek. Př. images/header_mobile.png images/heder.png |
||
| Taps Profil |
#2 · Zasláno: 6. 2. 2016, 13:05:32
Zkus pouzit media queries a dle rozliseni nastavis prislusny obrazek.
|
||
| grimword Profil |
Já bych to udělal takto:
.hlavicka { background-image: url('images/header_mobile.png'); } //pro obrazovku menší než 560px
@media(min-width: 560px) { .hlavicka { background-image: url('images/header_tablet.png'); } } //pro obrazovku větší než 560px, ale menší než 1040px
@media(min-width: 1040px) { .hlavicka { background-image: url('images/header_PC.png'); } } //pro obrazovku větší než 1040pxModerátor Chamurappi: Odkazy na web, kde změna obrázků použitá není, odmazány. Moderátor Chamurappi: Beru zpět, pokus o spamování to pravděpodobně nebyl, pardon.
|
||
| Str4wberry Profil |
#4 · Zasláno: 6. 2. 2016, 15:39:36
Je potřeba nevkládat obrázek značkou
<img> (protože by se zbytečně načítaly i nepoužité varianty), ale pomocí CSS backgroundu.
Různé obrázky se potom nastaví pomocí @media pravidla.
Živá ukázka |
||
| grimword Profil |
Ano, mám 8 let starý profil. A právě jsi odhalil, že jsem celých těch 8 let čekal na tento thread, abych tady poslal odkaz. Chytil jsi mě při činu!!! Good job.
BTW: Já jsem mu dal funkční kód a k tomu odkaz na funkční ukázku. Ty jsi mu dal odkaz na manuál. Double good job. |
||
| lionel messi Profil |
#6 · Zasláno: 6. 2. 2016, 16:10:35
grimword:
„BTW: Já jsem mu dal funkční kód a k tomu odkaz na funkční ukázku.“ Ukážka bola ale irelevantná, kód relevantný k autorovmu problému neobsahovala. „Prosím tě, rezignuj na svoji funkci, protože jsi aids této komunity.“ Hmmm, a ty si čo pre ňu urobil? :-) |
||
| Chamurappi Profil |
#7 · Zasláno: 6. 2. 2016, 16:53:45
Reaguji na grimworda:
Teď se v tom nějak ztrácím. Je na efinancovani.cz změna obrázků podle @media, nebo není? Je tam něco víc, než jsi uvedl v kódu, když doporučuješ se tam podívat?
„Ty jsi mu dal odkaz na manuál.“ Jaký odkaz jsem mu kde dal? Já mu přeci vůbec neodpovídal. „rezignuj na svoji funkci, protože jsi aids této komunity“ Jů. To je na Nobelovu cenu, když bys dokázal AIDS přesvědčit k rezignaci :-) |
||
| lionel messi Profil |
#8 · Zasláno: 6. 2. 2016, 16:58:54
Chamurappi:
> Reaguji na grimworda: > Teď se v tom nějak ztrácím. Je na efinancovani.cz změna obrázků podle @media, nebo není?
Nie je, pozeral som sa na to asi pred 2 hodinami… Aj druhý odkaz na tento portál vo vedľajšom vlákne (kde mala jeho stránka slúžiť ako príklad na použitie meta tagu viewport) bol v tomto smere irelevantný. |
||
| Tomáš123 Profil |
#9 · Zasláno: 6. 2. 2016, 17:41:16
grimword:
„Já jsem mu dal funkční kód a k tomu odkaz na funkční ukázku.“ Ty si mu dal takmer nefunkčný kód a k tomu si priložil reklamný odkaz na svoju stránku, ktorá nesúvisí s problémom. „Ty jsi mu dal odkaz na manuál.“ Nie je to manuál. Navyše je tam prítomná funkčná ukážka. „Chytil jsi mě při činu!!! Good job.“ Neviem, komu to patrí, ale očividne úspešná akcia pri pohľade na tvoju reakciu. Aj keby na stránke, na ktorú si odkázal, bola ukážka (nie je), v ktorej sa ten obrázok skutočne mení, zavolal by som na tvoj príspevok moderátora. Je nežiaduce odkazovať na web plný balastu. Ak chceš pomôcť, priprav poriadnu ukážku. Začiatočník nie je schopný prelúskať celý kód (už vôbec nie so štruktúrou podobnou tej tvojej), keď nevie, čo má hľadať. Vedz, že ešte párkrát spomenieš ten web v nevhodnej súvislosti, už si tu nezašpásuješ, ani keby sa na tej stránke nachádzalo požadované riešenie (aj keby tam bola príkladná ukážka riešenia -- na to je Živá ukázka). |
||
| grimword Profil |
#10 · Zasláno: 6. 2. 2016, 17:52:01
Před pár dny jsem vytvořil můj první responzivní web. A poslední dva thready se týkaly responzivity. Tak jsem posledním dvoum tazatelům poslal kód, jak jsem to řešil já, plus jsem jim poslal přesnou stránku (nebo CSS soubor), kde jsem to použil. Protože sám vím ze zkušenosti, jak je těžké s tím začít.
Ano, jsem hrozný spammer, že jsem za 8 let vložil do fóra dva odkazy. A další spamování mi nedoporučujete. Udělám vám to jednodušší. Odhlašuji se. A těch 5 návštěvníků, co tady máte za den, si můžete moderovat v 10 administrátorech. Možná by jste měli cenzurovat i mé jméno, protože začáteční písmeno evokuje reklamu na nejmenovaný vyhledávač. Good luck. |
||
| lionel messi Profil |
grimword:
„Ano, jsem hrozný spammer, že jsem za 8 let vložil do fóra dva odkazy.“ Za 24 hodín si do fóra vložil dva irelevantné odkazy, ktoré si navyše vydával za demonštráciu riešenia problémov. „plus jsem jim poslal přesnou stránku (nebo CSS soubor), kde jsem to použil.“ Prestaň už konečne klamať, je to maximálne trápne. V stránke nebola Za krivé obvinenie s meta tagom sa ospravedlňujem, to však nič nemení na relavancii dnešného príspevku. |
||
| Chamurappi Profil |
Reaguji na grimworda:
Vypadá to podezřele, když roznášíš odkazy bez zjevné souvislosti. Změnu obrázků na efinancovani.cz v závislosti na rozlišení nemáš a bylo zde naznačeno, že i v tom druhém vlákně byl odkaz spíš navíc (víc lidí přehlédlo, že ten <meta> v kódu opravdu máš). Takže to vypadá jako spam, i když to bylo spíš možná jen nevinné chlubení. Krom toho sektor nebankovních půjček nemá zrovna nejlepší pověst…
„že jsem za 8 let vložil do fóra dva odkazy“ Už jsme tu měli pár lidí, kteří se po mnoha letech vrátili a zkoušeli spamovat. Krom toho by bylo možné, že ti někdo ukradl účet (dlouho jsi tady nebyl). „A těch 5 návštěvníků, co tady máte za den“ Pět nových registrovaných. Denní návštěvnost je o několik řádů vyšší. Věřím ti, že jsi spamovat nechtěl, omlouvám se ti za obvinění, ale podezření bylo na místě. A ten „aids této komunity“… zkus příště trochu přemýšlet, než příspěvek pošleš. |
||
| Jakub Rychlý Profil |
#13 · Zasláno: 6. 2. 2016, 22:16:11
grimword: Mám ještě otázku...co musím vložit do HTML? Pokud tam vložím pouze CSS a obrázky tak mi to nic neudělá
|
||
|
Časová prodleva: 6 dní
|
|||
| Tomáš123 Profil |
#14 · Zasláno: 13. 2. 2016, 09:44:15
Jakub Rychlý:
Ak vkladáš obrázok cez HTML: <p>Nejaký text <img src="obrovsky-obrazok.png" class="desktop" alt="..."> <img src="malicky-obrazok.png" class="mobile" alt="..."> ... V CSS ich môžeš vystriedať takto: img.mobile {
display: none;
}@media screen and (max-width: 560px) {
img.desktop {
display: none;
}
img.mobile {
display: inline-block; /* Alebo block, podľa toho ako chceš aby sa zobrazoval */
}
}O tom, prečo môže byť pri rozsahu vhodnejšia jednotka em sa píše na jecase.cz
Ak by si chcel meniť obrázok nastavený v CSS, vyzeralo by to nejako takto: div.s-pozadim {
background-image: url(obrovsky-obrazok.png);
}
@media screen and (max-width: 560px) {
div.s-pozadim {
background-image: url(malicky-obrazok.png);
}
} |
||
|
Časová prodleva: 8 let
|
|||
0