html - 如何使网站的内容主体响应

Question

我有一个网站，我试图做出响应，当我应用 @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;
}
}

Sample Page

Answer 1

.bio_left 的绝对宽度为 800 像素。因为 .content_body 已将溢出设置为隐藏且其宽度为 100%，所以内容被剪掉了。

出现在页面底部的 bios.png 图像更适合作为背景图像。它不显示任何内容，而且在窄设备上看起来很奇怪(不，给它 display: none 以在窄设备中隐藏它并不是“删除”它的好方法)。

这种布局真的会受益于首先为窄设备设计样式，然后将所有 float 、绝对宽度和奇数边距存储在检查更宽设备的媒体查询中。

另外，媒体查询不需要最小宽度和最大宽度。您可以只指定最大宽度。我不认为有任何设备的宽度小于 180 像素。