0

Web サイトをどのように表示するかを決めたので、どの画面解像度でも見栄えを良くする方法が必要です。生活を楽にするために、デザインをいじっているときに静的な寸法を設定しました。寸法は 1040x690 に設定されています。自宅では 1920x1080 の解像度を使用しており、上司のラップトップは 800x600 です。ウェブサイトが大きすぎるか小さすぎるように見えます。

これを修正するために、CSS でパーセンテージで設定できることに気付きました。問題は、デザインの寸法に基づいて、Web ページにさまざまなサイズの画像があることです。写真のサイズをそのままにして見栄えを悪くすることなく、Web サイトのサイズを動的にするにはどうすればよいですか。

4

5 に答える 5

2

メディア クエリで試すことができます。

たとえば、このようなもの

 @media only screen and (max-width: 1023px) and (min-width: 768px) {
         div#container {width: 768px;}

        }

このリンクを試してください

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries http://www.danstorm.com/dan-storm-article-css-15.html

于 2012-07-31T15:55:40.267 に答える
2

これはレスポンシブ デザインと呼ばれ、通常、モバイル デバイス用にレイアウトを再フォーマットするために適用されます。さまざまなサイズのフォーマットは、通常、ユーザーの画面サイズに基づいてさまざまなスタイルシートを適用するメディア クエリを使用して行われます。

一般に、サイトは非モバイル バージョンの異なる解像度に対して異なるバージョンを作成せず、共通の解像度 (通常は 960 幅) に固執します。さまざまなサイズの画像をサポートするようになると、すべての解像度をサポートするという追加の複雑さは、通常は価値がありません。

つまり、さまざまな解像度をサポートできますが、より多くの作業が必要になります。視聴者を考慮し、大多数の人にとって機能するようにします。

98% の人が幅 1024 より大きいモニターを持っているので、あなたの上司は例外です。

参照: http://gs.statcounter.com/#resolution-ww-monthly-201106-201206

于 2012-07-31T15:59:34.967 に答える
1

CSSフレームワークとFoundationと呼ばれるプロトタイプデザインを使用できます。次のURLで見つけることができます：http： //foundation.zurb.com/

それは多くのデバイスと解像度に適したあなたのウェブページのための柔軟で使いやすいデザインを提供します。

于 2012-07-31T15:57:02.683 に答える
1

はい、CSS のscaleプロパティでhtml部門 (つまり、HTML タグでカバーされる領域 - サイト全体) をスケーリングすることでこれを行うことができます。CSS は、ドキュメント内の任意の要素のサイズ (幅 x 高さ) をスケーリングできる scale という名前のプロパティを提供します。

例えば、

<div id ="t_div"></div>


これで、分割のサイズを次のようにスケーリングできます。

#t_div { -moz-transform:scale(1.5,1.5); //for Firefox }

上記のコードは、除算のサイズを x1.5 で増やします。CSS のこのプロパティを使用して、Web サイトのメイン タグ (<html>) をスケーリングし、画面サイズに合わせてサイズを調整できます。以下のリンクは、このスケールプロパティをサイトに動的に適用する方法について非常に詳細に説明しています。では、こちらをご覧ください。http://khuntronak.blogspot.com/2013/12/how-to-fixsolve-screen-resolution.html

于 2014-01-10T18:58:25.903 に答える
-1

これを head セクションに追加してみてください: <meta name="viewport" content="width=device-width">

于 2012-07-31T15:56:37.287 に答える