0

レスポンシブ デザインを試すために、教育目的でスライス スライダーを作成しています。

レスポンシブにするために3日間試しましたが、試したすべてが機能しませんでした。

誰かがページの背景にカーソルを合わせるdivと、4 つの画像を含む非表示が表示されます。ズームインすると、最後の画像の位置が変化しています。

これは私のコードです：

<div class="container">
   <div class="reveal unreveal">
    <div  class="caption">
     <div class="contContainer">
      <div class="imgContainer">
       <img src="css/image1.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image2.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image3.png" />
      </div>
      <div class="imgContainer2">
       <img class="yoloimg" src="css/image4.png" />
      </div>
    </div>
   </div>
 </div>
</div>

CSS:

body {
  background: #222;
  max-width:100%;
  min-width:80%;
}
.contContainer {
width:90%;
padding:5px;
margin:0 auto;
}
.imgContainer {
width:20%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
margin-left:5px;

}
.imgContainer2 {
width:38%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
}
.yoloimg {
width:94%;
height:auto;
}
.imgContainer img {
width:96.8%;
height:auto;

}
.unreveal {

  background: url("ayo_bottom.png") 0px 278px, url("ayo_top.png") 0px 0px, #ffffff;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  background-size:contain;
  transition: background-position 0.3s ease;
}

 .unreveal:hover {
   background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
  background: url("ayo_bottom.png") 0px 500px, url("ayo_top.png") 0px -50px, #ffffff;
  background-repeat: no-repeat;
  background-size:contain;
}

.reveal {
  max-width:1100px !important;
  width:100%;
  height:auto;
  min-height:800px;
  float: left;
  margin:0 auto;
}

div.caption {
        top: 32%; 
        max-width:1100px;
        position: absolute;
        margin:0 auto;
        display:none;
    background:#2b2a28;

}

Skeleton 2.0.4 を使用しています (Bootstrap も使用しましたが、何も起こりませんでした)。問題は、クラスで背景に2つの画像を使用していることだと思いますが、.unreveal他に何をしなければならないかわかりません。max-width:everywhere, margin:0 auto私はスケルトンからのメディアクエリを使用しました。

誰かがそれを一目見たい場合は、それをアップロードしました: test-site。

前もって感謝します。

編集:画像の再配置を修正した後も、 container に問題があります。ズームインすると、2400px 何が起こっているかの画像で停止します。max-height:1100pxコンテナとボディに使用しましたが、機能しません。結果なしでも異なるDoctypeを使用しました。

4

1 に答える 1

1

あなたが見ている問題はあなたの％幅です：

.imgContainer {
  width: 20%;
  padding: 0px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  float: left;
  margin-left: 5px;
}

幅 765 ピクセルに達すると、それぞれの 20% (153 ピクセルの計算値) に加えて、左マージンの 5 ピクセルが得られます: 158 x 3 = 474

imgContainer2 の幅は 38% で、765px のときにちょうど上に押し出され、次の行に強制されます。margin-left を完全に取り除くか、765px のメディア クエリを記述します。

@media screen and (max-width: 765px) {
    .imgContainer {
        margin-left: 0;
    }
}

サイズをいじってみると、次の行へのジャンプが正確に 765px で発生することがわかります。幅 766 ピクセルで、見栄えがよくなります。原則として、% 幅を扱うときは、ピクセルのマージンとパディングを避けたいと考えています。画面のサイズを変更すると、必ず問題が発生します。

于 2015-03-27T13:58:47.667 に答える