63

一部のjQueryプラグインは、cssルールで「zoom」記述子を使用していることがわかりました。w3cWebサイトを調べても、拡大に使用されていることがわかりましたが、実際に実装するにはどうすればよいですか？または、ビューポートを定義する必要がありますか？そして、どうすればそのようなビューポートを定義できますか？または私は全体について間違っていますか？

のように使用することは可能ですか

a {
    zoom:1;
}

a:hover {
   zoom:2;
}
4

7 に答える 7

67

-moz-transform: scale(x)ズームはCSS仕様には含まれていませんが、IE、Safari 4、Chromeでサポートされています（ 3.5以降のFirefoxでも同様の効果が得られます）。ここを参照してください。

したがって、すべてのブラウザ

 zoom: 2;
 zoom: 200%;

オブジェクトを2倍に拡大するので、サイズを2倍にするようなものです。つまり、あなたが持っている場合

a:hover {
   zoom: 2;
}

ホバーすると、<a>タグは200％ズームします。

私が言うように、FireFox 3.5+の使用-moz-transform: scale(x)では、それはほとんど同じことをします。

編集：からのコメントに応えて、私はそれが完全な置き換えthirtydotではないと言います。scale()それは、そうであるように一列zoomに拡張するのではなく、他のコンテンツを邪魔することなく、箱から出してコンテンツの上に拡張します。こちらで実際の動作をご覧ください。さらに、zoomOperaではサポートされていないようです。

このscale投稿では、 jQueryを使用して非互換性を回避する方法と回避策についての有用な洞察を提供します。

于 2012-04-23T10:34:55.337 に答える
38

hasLayoutzoom: 1;をトリガーすることでほとんどのIEのみのバグを解決するために、IE6-7に役立つことを誰も言及していないことに驚いた。

于 2012-04-23T10:49:48.553 に答える
3

CSSzoomプロパティは現在広くサポートされており、ブラウザの総人口の86％を超えています。

参照：http ：//caniuse.com/#search=zoom

document.querySelector('#sel-jsz').style.zoom = 4;
#sel-001 {
  zoom: 2.5;
}
#sel-002 {
  zoom: 5;
}
#sel-003 {
  zoom: 300%;
}
<div id="sel-000">IMG - Default</div>

<div id="sel-001">IMG - 1X</div>

<div id="sel-002">IMG - 5X</div>

<div id="sel-003">IMG - 3X</div>


<div id="sel-jsz">JS Zoom - 4x</div>

ブラウザのサポート：caniuse

于 2017-01-06T11:32:06.540 に答える
2

このプロパティは、現在の要素の拡大レベルを制御します。要素のレンダリング効果は、カメラの「ズーム」機能の効果です。このプロパティは継承されませんが、子要素のレンダリングに影響します。

例

 div { zoom: 200% }
 <div style=”zoom: 200%”&gt;This is x2 text </div>
于 2012-04-23T10:28:03.587 に答える
2

ここで説明するように、zoomは@viewport記述子のcss3仕様です。

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

ビューポート全体（「画面」）をズームするために使用されます。また、すべてではありませんが、多くのブラウザで個々の要素をズームすることもあります。css3は、このような効果を実現するためにtransform：scaleを使用する必要があることを指定しています。

http://www.w3.org/TR/css3-transforms/#transform-functions

ただし、それをサポートするブラウザの「要素ズーム」とは少し異なります。

于 2013-05-05T14:39:49.443 に答える
1

IEとWebKitのみがズームをサポートしており、理論的には、あなたが言っていることを正確に実行します。

画像で試してみて、完全な効果を確認してください:)

于 2012-04-23T10:27:59.710 に答える
-1

Joshua Mが指摘したように、ズーム機能はFirefoxでのみサポートされているわけではありませんが、次のように簡単に修正できます。

div.zoom {
  zoom: 2; /* all browsers */
 -moz-transform: scale(2);  /* Firefox */
}
于 2012-04-23T10:33:45.487 に答える