Zum - Trik CSS

Anonim

The zoomharta di CSS membolehkan anda mengikut skala kandungan anda. Ini tidak standard, dan pada mulanya hanya dilaksanakan di Internet Explorer. Walaupun beberapa penyemak imbas lain kini menyokong zoom, ia tidak digalakkan untuk laman web produksi.

.zoom ( zoom: 150%; )

Nilai "disokong: adalah:

  • percentage - Skala mengikut peratusan ini
  • number- Tukar kepada peratusan dan skala - 1 == 100%; 1.5 == 150%;
  • normal - zum: 1;

Sekiranya penyemak imbas anda menyokongnya, anda akan melihat gambar ini sebagai ukuran yang berbeza:

Lihat Pen ini!

Zoom adalah perkara lama IE. Ini bukan sesuatu yang harus anda gunakan di laman web langsung. Sekiranya anda ingin menskalakan kandungan, gunakan CSS Transforms. Anda juga boleh menggunakan penapis jika anda memerlukan sokongan oldIE.

Kembali pada zaman IE6, zoom digunakan terutamanya sebagai hack. Banyak bug rendering di kedua IE6 dan IE7 dapat diperbaiki menggunakan zoom. Sebagai contoh, display: inline-blocktidak berfungsi dengan baik di IE6 / 7. Menetapkan zoom: 1menyelesaikan masalah. Bug itu ada kaitan dengan bagaimana IE memberikan susun aturnya. Pengaturan zoom: 1menghidupkan harta dalaman yang disebut hasLayout, yang menyelesaikan masalah.

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Sebarang 4.0+ Tiada Tiada 5.5+ TBD TBD

Safari juga menyokong zoomsejak versi 4. Walau bagaimanapun, ia menambah nilai baru: reset. Itu memberitahu penyemak imbas untuk tidak mengezum elemen anda pada zoom. Jadi cmd / ctrl + anda? Ia tidak berfungsi pada elemen yang zoom: resetdigunakan