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的绝对宽度为800px。由于.content_body溢出设置为隐藏且宽度为100％，因此内容会被剪掉。

页面底部显示的bios.png图像更适合作为背景图像。它没有呈现任何内容，只是在狭窄的设备上看起来很奇怪（不，让它display: none将它隐藏在狭窄的设备中并不是“删除”它的好方法。

这种布局确实会受益于首先为窄设备设置样式，然后在检查更广泛设备的媒体查询中隐藏所有浮动，绝对宽度和奇数边距。

此外，媒体查询不需要最小宽度和最大宽度。您只需指定最大宽度即可。我不认为那里有任何宽度小于180px的设备。

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

1 个答案: