5

インターネット全体で、絶対ピクセルの高さ/幅/サイズでフォント (または何か) を定義するべきではなく、代わりにEMを使用して、より高い解像度のディスプレイで Web サイトを適切にスケーリングできるようにすることを読みました。

ただし、 IMAGE の高さ/幅を定義するために何を使用しますか...画像はうまくスケーリングされないためです(ピクセル化されているように見えます)

更新：

明確にするために、私はページのズームについて言及していません。Web アプリケーションの解像度を独立させて、より高い DPI ディスプレイで正しく表示されるようにする方法について言及しています。

4

7 に答える 7

6

この質問が少し古いことは承知していますが、後で来る可能性のある人のために公開したいと思います。より高いピクセル密度を持つモバイル デバイスについて話す場合、モバイル ブラウザは、Web ページがそれほど小さくないように見えるようにページを拡大します。デバイスは、 CSS 2.1 仕様に従ってこのズームを実装します。

たとえば、今日の多くのデバイスは、デスクトップ モニターと比較して 1.5 倍のピクセル密度比を持っています。その結果、モバイル ブラウザはウェブサイトを約 150% ズームして余分なピクセルを補正します。新しい Retina ディスプレイのピクセル密度比は 2 倍です... そのため、ブラウザは Web サイトを約 200% 拡大します。

問題のポイント - 開発者は、異なる解像度のデバイスについて心配する必要はありません。高解像度のデバイスで画像をはっきりと表示したい場合は、より高解像度の画像が必要になります。通常、1.5x デバイスについて心配する必要はありません。品質の違いはごくわずかであり、努力する価値がないからです。ただし、新しい Retina ディスプレイでは非常にぼやけた画像が発生するため、2 倍の画像を使用する必要があります。

したがって、次の画像の場合、画像が新しい Retina ディスプレイにはっきりと表示されるように、600x400 ピクセルの画像をエクスポートする必要があります。

<img src="photo.jpg" style="width:300px; height:200px" />
于 2012-04-10T22:02:38.183 に答える
3

Font sizes should be set in em (or %) because if the user changes the text size in IE (View > Text Size), text set in px (or have a fixed size somewhere up the inheritance chain) won't be resized. (Other browsers have no problem resizing text set in px.) See How to size text using ems for more on this.

Images with px dimensions are not resized when the user changes text size; images with em dimensions are resized. So if an image's size should be relative to the text size (a rare case), then use em. Otherwise px dimensions is fine.

For page zoom (where the browser makes everything larger or smaller), it doesn't matter if dimensions (text or image) are defined using em or px.

于 2010-04-23T02:55:56.167 に答える
0

このページの解決策を参照してください

http://nickcowie.com/2005/elastic-images/

HTML

<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>

CSS

.widecolumn .imageholder {
width:51.5em;}

.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}
于 2010-04-23T03:36:25.607 に答える
0

emを使用して IE でテキストのサイズを変更すると、大きくすると本来よりも大きくなり、小さくすると本来よりも小さくなります。

すべてのブラウザーで機能する解決策は、body 要素の既定の font-size をパーセントで設定することです。

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

http://w3schools.com/css/css_font.asp

pxとソース コードを使用した画像スタイリングの完璧な例は、http ://w3schools.com/css/css_image_gallery.asp にあります。画像は、テキストの増減に合わせて完全にスケーリングされます。

于 2010-04-23T02:51:38.087 に答える
0

画像に関しては、ページの解像度に依存しないようにすることは実際には不可能です。

ベクター グラフィックスは本当に DPI に依存しないため、画像には SVG を使用できますが、これは写真にはうまく機能しません。

高解像度の画像を使用して、小さいサイズで表示できます。このように、サイズアップすると、見た目がずっと良くなります。一部のブラウザーでは、縮小された画像はそれほど悪くはありません。

これは例のページhttp://www.cssplay.co.uk/menu/em_imagesで、ems でサイズ設定された高解像度画像があります。ページ ズームを使用する Opera では、ズーム レベルを上げても高解像度画像の鮮明さが保たれます。

于 2010-04-24T12:37:53.153 に答える
0

通常、ほとんどの要素には em を使用し、画像には正確なピクセルを使用します。テキスト サイズが調整されると、画像は他のすべてのものに合わせて拡大縮小されないため、さまざまなテキスト サイズでページがどのように見えるかを確認し、必要に応じて調整する必要がありますが、これは妥当な妥協点だと思います (画像の拡大縮小に対して)。

于 2010-04-23T02:06:38.517 に答える
-1

Retina デバイスの場合、2 番目の画像のサイズを 2 倍にし、ファイル名に @2x を追加することもできます。つまり、image.jpg という名前の 200px x 300px の画像がある場合は、400px x 600px の別の画像を入れて名前を付けるだけです。 image@2x.jpg および Retina デバイスでは、代わりにそれが表示されます。

于 2013-08-15T07:57:04.683 に答える