0

クライアントのためのウェブサイトのデザインを終えた後、私はすべてがちょっと小さいことに気づきました。ブラウザのズームを試してみたところ、10％のズームでかなり修正されたことがわかりました。問題は、すべて（divサイズ、画像サイズ、テキストサイズなど）のサイズを110％に変更する方法がわからないことです。

どんなアイデアでも大歓迎です。私はこれをすべてCSSで行いたいと思います。

編集 -

ははは、OKみんな、私はただ入って、実際にサイズを変更するのに少し時間を費やすと思います。それは私がやりたかったことではありませんが、それが私の唯一の本当の選択肢だと思います。みんなありがとう ：）

4

3 に答える 3

3

これを行う正しい方法は、Webサイトを再設計することです。正しく設計していれば、これは非常に簡単です。いくつかのアドバイス：

  • ページ幅：最も外側のコンテナの幅を増やします。絶対幅をハードコーディングしていない限り、子要素の幅はスペースを埋めるために拡張する必要があります。そのような場合は、に合わせて調整してくださいpx。

  • フォントサイズ：emまたは%値を使用した場合は、font-sizeのを大きくしますbody（他の要素はこの基本フォントサイズを継承します）。フォントサイズを使用pxしたことがある場合は、フォントサイズを大きくする必要があります。

zoomJavaScriptまたはIEプロパティを介してページを「ズーム」することは適切なアプローチではなく、再設計を回避していることを深く知っていると思います。のようなものでもbody{ transform:scale(1.1); }、拡大縮小/拡大すると画像の見栄えが悪くなります。CSS3であるため、サポートが不足します。このアイデアをテストした後、ビューポート/表示領域からコンテンツを拡大縮小できるようです。

これを永続的な変更にしたい場合の正しい方法は、CSSを書き直すことです。

于 2012-05-05T20:13:45.707 に答える
2

別の方法で問題を解決することをお勧めします（フォントサイズを10px上に設定するなど）

しかし、あなたが本当にそれをしたいのなら、私はあなたに同様の問題に関する私の最近の答えを紹介します。FFはjsを介したズームを許可していないため、FFはこれをサポートしていないので注意してください。

JavaScriptでブラウザのズームを模倣する

[どうぞ：] [1]

使用する：

document.body.style.zoom=1.0;this.blur();

1.0は100％を意味します

150％は1.5になります1000％は10.0になります

this.blur（）は、入力フィールドを選択した可能性のあるcurserが、選択したすべての項目のフォーカスを失うことを意味します。

また：

css3要素[zoom][2]（[Source] [3]）を使用できます

[Firefoxでは許可されていません][4]javascriptまたはsthを介してユーザープロパティにアクセスできないため、ブラウザでズームできません。

したがって、ズーム（CSS3：ズーム、上記のとおり）またはテキストサイズの拡大を可能にするいくつかのCSSスタイルを使用できます。たとえば、別のCSSファイルを含めることでこれを行うことができます。しかし、ここでは「ジャンピー」の問題があります。これは、スタイル設定されたcss要素（フローティングなど）が、実際にはそれらの属性が異なる「相互作用」する必要があるためです。

上で投稿したズームは、ChromeとIE8 +でうまく機能します（前述のようにFFはサポートされていません）

[1]： http: //www.perlunity.de/javascript/scripts/javascript_0314_main.shtml [2]：http ://www.css3.com/css-zoom/ [3]： WebページにズームインできますかIEやFirefoxのように、プログラミングを使用しますか？ [4]： http ://www.mozilla.org/projects/security/components/signed-scripts.html

于 2012-05-05T20:02:53.077 に答える
1

これにより、すべての価値のあるブラウザで、画面上のすべてのサイズが200％のスケールに変更されます。

body {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}
于 2013-03-28T14:46:55.280 に答える