Yakınlaştır - CSS Hileleri

Anonim

CSS'deki zoomözellik, içeriğinizi ölçeklendirmenize olanak tanır. Standart değildir ve başlangıçta yalnızca Internet Explorer'da uygulanmıştır. Diğer birkaç tarayıcı artık yakınlaştırmayı desteklese de, üretim siteleri için önerilmez.

.zoom ( zoom: 150%; )

"Desteklenen: değerler şunlardır:

  • percentage - Bu yüzdeye göre ölçeklendirin
  • number- Yüzdeye ve ölçeğe dönüştürme - 1 ==% 100; 1.5 ==% 150;
  • normal - yakınlaştırma: 1;

Tarayıcınız destekliyorsa, bu resimleri farklı boyutlarda göreceksiniz:

Bu Kaleme bakın!

Yakınlaştırma eski bir IE şeyidir. Canlı sitelerde kullanmanız gereken bir şey değil. İçeriği ölçeklemek istiyorsanız CSS Dönüşümlerini kullanın. OldIE desteğine ihtiyacınız varsa filtreleri de kullanabilirsiniz.

IE6 günlerinde, yakınlaştırma öncelikle bir hack olarak kullanılıyordu. Hem IE6 hem de IE7'deki görüntü oluşturma hatalarının çoğu yakınlaştırma kullanılarak düzeltilebilir. Örnek olarak, display: inline-blockIE6 / 7'de pek iyi çalışmadı. Ayar zoom: 1sorunu çözdü. Hata, IE'nin düzenini nasıl oluşturduğuyla ilgiliydi. Ayar zoom: 1, sorunu çözen hasLayout adlı dahili bir özelliği açtı.

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
Hiç 4.0+ Yok Yok 5.5+ TBD TBD

Safari de destekler zoomsürüm 4. Bununla birlikte, yeni bir değer katma başlangıcı: reset. Bu, tarayıcıya öğenizi yakınlaştırmada yakınlaştırmamasını söyler. Yani cmd / ctrl +? zoom: resetUygulanan elemanlarda çalışmaz .