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
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ž 1040px
Moderátor Chamurappi: Odkazy na web, kde změna obrázků použitá není, odmazány. Totéž vedle. Další pokusy o spamování nedoporučuji.
Moderátor Chamurappi: Beru zpět, pokus o spamování to pravděpodobně nebyl, pardon.
Str4wberry
Profil
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
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
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
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
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
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 ani meta tag viewport, ani zmena obrázku na pozadí v závislosti na rozlíšení.

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
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á
Tomáš123
Profil
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);
  }
}

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: