Zväčšiť - Triky CSS

Anonim

zoomVlastnosť CSS umožňuje škálovať svoj obsah. Je to neštandardné a pôvodne sa implementovalo iba v prehliadači Internet Explorer. Aj keď niekoľko ďalších prehľadávačov teraz podporuje zväčšenie, pre produkčné weby sa neodporúča.

.zoom ( zoom: 150%; )

„Podporované: hodnoty sú:

  • percentage - Mierka o toto percento
  • number- Prevod na percento a mierku - 1 == 100%; 1,5 == 150%;
  • normal - zväčšenie: 1;

Ak to váš prehliadač podporuje, uvidíte tieto obrázky v rôznych veľkostiach:

Vyskúšajte toto pero!

Zoom je stará IE vec. Nie je to nič, čo by ste mali používať na živých stránkach. Ak chcete zväčšiť obsah, použite transformácie CSS. Môžete tiež použiť filtre, ak potrebujete podporu oldIE.

V časoch IE6 sa zoom používal predovšetkým ako hack. Mnoho chýb pri vykresľovaní v IE6 aj IE7 sa dalo opraviť pomocou lupy. Ako príklad display: inline-blocknefungoval v IE6 / 7 veľmi dobre. Nastavenie zoom: 1problém vyriešilo. Chyba mala súvisieť s tým, ako IE vykreslil svoje rozloženie. Nastavenie zoom: 1zaplo internú vlastnosť s názvom hasLayout, ktorá problém vyriešila.

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
akýkoľvek 4,0+ Žiadne Žiadne 5,5+ TBD TBD

Safari tiež podporuje zoomod verzie 4. Je však pridal novú hodnotu: reset. To znamená, že prehľadávač nemá zväčšovať svoj prvok na zväčšenie. Takže váš cmd / ctrl +? Na prvky s zoom: resetaplikovaným to nefunguje .