1

レスポンシブデザインを勉強中です。私はウェブサイトを構築しており、ページの 1 つはポートフォリオです。このページをどのようにレイアウトするかについて、次のモックアップを設定しました。もちろん、それは非常に簡素化されたバージョンです。この形式がワイドスクリーンのデスクトップ、iPad、そして携帯電話で問題なく表示されるように、適切なクエリを適用できないようです。最初のクエリを開始しましたが、もちろん機能していません。また、それが一般的なワイドスクリーン デスクトップに最適なサイズであるかどうかもわかっています。

それをこのページに適用する方法を教えてもらえますか? チュートリアルを続けますが、ここでキックスタートが必要です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/css">
@media screen and (max-width:1080px) {
    #main {
        width: 960px;
    }
}
body {
    background-color: #FFF;
    margin:0;
}

#main {
    width: 1080px;
    margin-right: auto;
    margin-left: auto;
    height: 860px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.box {
    background-color: #CCC;
    height: 200px;
    width: 200px;
    margin-right: 20px;
    float: left;
    margin-bottom: 20px;
}
.box_last {
    background-color: #CCC;
    height: 200px;
    width: 200px;
    float: left;
    margin-bottom:20px;
}
.box_bottom {
    background-color: #CCC;
    height: 200px;
    width: 200px;
    margin-right: 20px;
    float: left;

}
.box_last_bottom {
        background-color: #CCC;
    height: 200px;
    width: 200px;
    float: left;

}
</style>
</head>

<body>
<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box_last"></div>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box_last"></div>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box_last"></div>

  <div class="box_bottom"></div>
  <div class="box_bottom"></div>
  <div class="box_bottom"></div>
  <div class="box_bottom"></div>
  <div class="box_last_bottom"></div>
</div>
</body>
</html>
4

1 に答える 1

1

現在のコードで#mainは、メディア クエリ ブロックの が上書きされています。CSS の一番下にメディア クエリを配置する必要があります。

#main {
    width: 1080px;
    ...
}

@media screen and (max-width:1080px) {
    #main {
        width: 960px;
    }

    .box {
        width: 200px;
        ...
    }
}

そして、小さな画面の場合

@media screen and (max-width: 480px) {
    #main {
        width: 100%;
    }

    .box {
        width: 50%;
        ...
    }
}
于 2012-11-16T20:16:22.400 に答える