Увеличение - CSS-трикове

Anonim

В zoomимота в CSS ви позволява да мащабирате вашето съдържание. Той е нестандартен и първоначално е реализиран само в Internet Explorer. Въпреки че няколко други браузъра вече поддържат увеличение, не се препоръчва за производствени сайтове.

.zoom ( zoom: 150%; )

„Поддържаните: стойности са:

  • percentage - Мащабирайте с този процент
  • number- Преобразуване в процент и мащаб - 1 == 100%; 1,5 == 150%;
  • normal - увеличение: 1;

Ако браузърът ви го поддържа, ще видите тези изображения като различни размери:

Вижте тази писалка!

Zoom е старо нещо в IE. Това не е нещо, което трябва да използвате на сайтове на живо. Ако искате да мащабирате съдържание, използвайте CSS трансформации. Можете също да използвате филтри, ако имате нужда от поддръжка на oldIE.

По времето на IE6 увеличението се използваше предимно като хак. Много от грешките при изобразяването както в IE6, така и в IE7 могат да бъдат отстранени с помощта на увеличение. Като пример, display: inline-blockне работи много добре в IE6 / 7. Настройката zoom: 1реши проблема. Грешката е свързана с това как IE е изобразил оформлението си. Настройката zoom: 1включи вътрешно свойство, наречено hasLayout, което реши проблема.

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Всякакви 4.0+ Нито един Нито един 5,5+ TBD TBD

Safari също поддържа zoomот версия 4. Въпреки това, той добави нова стойност: reset. Това казва на браузъра да не увеличава вашия елемент на увеличение. Значи вашият cmd / ctrl +? Не работи върху елементи с zoom: resetприложен.