0

ウェブサイトのインデックスページを調整可能に変換しようとしています。ページの全体の内容を調整できるようにしたい。調整可能とは、誰かが新しいウィンドウでページを開き、マウスでドラッグしてウィンドウのサイズを変更しようとすると、ウィンドウの幅と高さに応じてページのコンテンツも調整されることを意味します。

CSSのみを使用することは可能ですか、それともJavaScriptも使用する必要がありますか？

必要なのは[this][1]のようなものです

ヘルプやアドバイスは非常に高く評価されます

ありがとう

4

3 に答える 3

1

あなたがしたいのはレスポンシブデザインです

たとえば、cssターゲットを特定のデバイスに次のように設定できます。

//General css 


/*MEDIA BETWEEN 300 - 1000PX */ 
@media all and (min-width:300px) and (max-width:1000px)
{


}

/*MEDIA BETWEEN 621 - 800PX */ 
@media all and (min-width:621px) and (max-width:800px)
{

}

/*MEDIA BETWEEN 300 - 620PX */ 
@media all and (min-width:300px) and (max-width:620px)
{

}

役立つページのいくつかは次のとおりです。

  1. http://googlewebmastercentral.blogspot.in/2012/04/response-design-harnessing-power-of.html
  2. http://www.onextrapixel.com/2012/04/23/sensitive-web-design-layouts-and-media-queries/

注：pxとptの代わりにemと％を使用してください

于 2012-09-19T11:21:44.970 に答える
0

width: 75%;またはwidth: 60%;の代わりにwidth: 450px;またはのように、ものに相対的な幅を設定するだけwidth: 650px;です。これは、ページのサイズが変更されたときに要素を狭く/広くする必要がある場合に役立ちます。
レイアウトを大幅に変更する場合（提供したデモのように、ウィンドウが小さくなると上部のメニューバーがサイドバーになります）、ウィンドウの幅に基づいてスタイルシートを切り替えるためのJavascriptが必要になります。これがあなたにいくつかのアイデアを与えることを願っています！

于 2012-09-19T10:53:09.740 に答える
0

あなたが話しているのは「レスポンシブデザイン」と呼ばれています。レスポンシブサイトは、ピクセルの代わりにパーセンテージを使用したり、cssの「メディアクエリ」と呼ばれるものを使用したりすることでより効果的に機能します。

ここにそれについての素晴らしい記事があります：http： //www.alistapart.com/articles/sensitive-web-design/

于 2012-09-19T10:55:19.000 に答える