Obrázky v mobilních zařízeních

26. 10. 2015

Obrázky jsou jednoznačně nedílnou součástí webu, nicméně při zobrazení webu na mobilních zařízeních by obrázky v textu a motiv mohly být skryty. V tomto článku si ukážeme, jak motiv a obrázky skrýt v mobilních zařízeních.

S úpravou nám pomůže CSS vlastnost @media {}, která určí velikost ovlivněného zobrazovacího zařízení. Jakákoliv další specifikace mezi složené závorky se projeví pouze na zobrazovacích zařízeních s šířkou 768 px a menší. 

V našem scriptu pro skrytí obrázků a motivu se počítá se zobrazením obrázků u e-shopu a fotolagerií. Pro jeho použití jej stačí zkopírovat a vložit na konec Vlastního CSS stylu.

@media screen and (max-width:768px) {
 #content img {display:none;}

/* motiv a vlastní motiv */ 
  #motive, 
  #box-custom-motive {display:none}

/* fotogalerie */
  #foto img,
  #photos img {display:block;}

/* obchod */
  #eshop-categories img,
  #detail-product img,
  #content .thumbnail a > img {display:block;}
}

Bližší popis vlastností

Níže uvedená specifikace ovlivňuje zobrazovací zařízení do šířky 768px.

@media screen and (max-width:768px) {

}

Nejdříve vypneme zobrazení všech obrázků na webu včetně e-shopu a fotogalerií

#content img {display:none;}

Dále vypneme zobrazení motivu

/* motiv a vlastní motiv */ 
  #motive, 
  #box-custom-motive {display:none}

Nakonec zapneme zobrazení obrázků ve fotogaleriích, kategoriích a položkách eshopu.

/* fotogalerie */
  #foto img,
  #photos img {display:block;}

/* obchod */
  #eshop-categories img,
  #detail-product img,
  #content .thumbnail a > img {display:block;}

Další vychytávky a úpravy s pomocí Vlastního CSS stylu naleznete v článku Základní úpravy šablony One a Slide.