-1

このサイトを構築したい: http://www.alsite.com.br/misskessiレスポンシブ... しかし、レスポンシブ形式について疑問があります。

画像、リンク、テキストに何をする必要があるか知りたい...? これはパーセンテージであると思いますが、どのくらいですか?..解像度に合わせてサイズを変更する必要があることをどのように確認できますか....

例: 私の解像度 (1600 x 900) では問題なく動作します:

#wrap{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-495px;
    margin-top:-359.5px;
    width:990px;
    height:719px;
    background-color: rgba(247, 8, 8, 0.2);
}

しかし、1024x768の解像度では、スクロールバーが表示されます...だから私はこれに対応する必要があります...

しかし、どのように？

誰でも私を助けることができますか？

4

3 に答える 3

2

今回は、レスポンシブ デザインに関する質問に答えて、質問が削除されないことを願っています ;)

レスポンシブデザインとパーセンテージには違いがあります。
パーセンテージを求めたい場合は、すべてのポイントでそれらを追加する必要があります. 現在、画面の中央に配置されていますが、幅と高さ、およびマージンは固定されています (css の方法ではなく、論理的に)。それらもパーセント値に変更する必要があります。画像が大きくならないようにするには、max-height/min-heightプロパティをチェックアウトする必要があります (幅、左などについても同様です)。

さらに、それは本当にレスポンシブではありません。サイトをレスポンシブにして、非常に小さなブラウザーにも適応させるには、チェックアウトする必要がありますmedia queries( http://css-tricks.com/css-media-queries/およびhttps://developer.mozilla.org /en-US/docs/Web/Guide/CSS/Media_queries )。この 2 つのサイトは、過去数週間でレスポンシブ Web サイト ( http://wywy.tv/howimetyourmother ) を作成しなければならなかったときに、私を大いに助けてくれました。

メディア クエリを使用すると、さまざまな条件が満たされている場合、ほとんどの場合、画面の幅に合わせて css クラスを変更できます。たとえば、次のように css コードに記述します。

@media (max-width: 755px) {
  .content {
    width: 100%;
  }
  .header {
    margin: 0 auto;
  }   
  ...
}

このコードをかなり拡張できます。開発したサイトの css ファイルを見て、私が何をしたか、それが外観にどのように影響するかを確認してください。

于 2013-06-24T18:28:21.760 に答える
-2

画像を background-image にして、「background-size: cover;」を使用すると、ブラウザのサイズに合わせて拡大縮小できます。

于 2013-06-24T18:26:53.693 に答える