0

レスポンシブにしようとしている Web サイトがあります。適用する@media only screen and (min-width: 180px) and (max-width: 267px)と、右側のコンテンツ領域が切り取られます。以下は、私がページに適用しているCSSです。私は間違って何をしていますか?

ありがとうございました。

の

CSS

.content_body{
margin: 0 auto;
width: 100%;
overflow: hidden;
padding-top: 30px;
 background:    #C9C7BB;
color:    #555;
font-family:  Tahoma, Arial, sans-serif;
font-size:    14px;
min-height: 200px;  
}

.bio_wrapper{
line-height: 25px;
 padding: 20px 0px 500px 50px;
}

 .bio_left{
 width: 800px;
 float: left;
 font-family: lato;
 color: black; 
}

.bio_images{
margin: 0;
margin-top: 30px;
margin-bottom: 90px;
}

.bio_images li{
padding-right: 35px;
display: inline;
list-style-type: none;
}

.bio_images li:last{
   padding-right: none; 
 }

 .bio_images img{
border: 4px solid #999966;
border-radius: 5px; 
}

.bio_mainimage{
float:right;
width: 20%; 
}

  @media only screen and (min-width: 180px) and (max-width: 267px) {

 .bio_mainimage{
  display: none;
  }

.content_body{
margin: 0 auto;
width: 50%;
overflow: hidden;
padding-top: 30px;
 background:    #C9C7BB;
color:    #555;
font-family:  Tahoma, Arial, sans-serif;
font-size:    14px;
min-height: 200px;  
 }

.bio_images img{
display: block;
}
}

サンプルページ

4

1 に答える 1

0

.bio_left絶対幅は 800px です。オーバーフローが非表示に設定されており、幅が 100% であるため.content_body、コンテンツが切り取られます。

ページの下部に表示される bios.png 画像は、背景画像として適しています。コンテンツを表示しておらず、狭いデバイスでは奇妙に見えるだけです (いいえ、display: none狭いデバイスから非表示にすることは、それを「削除」する良い方法ではありません)。

このレイアウトは、最初に幅の狭いデバイス用にスタイルを設定し、幅の広いデバイスをチェックするメディア クエリ内にすべてのフロート、絶対幅、および奇数マージンを格納することで、実際にメリットが得られます。

また、メディア クエリには最小幅と最大幅の両方は必要ありません。最大幅を指定するだけです。幅が 180px 未満のデバイスはないと思います。

于 2013-01-13T13:10:49.290 に答える