Question

我希望这个#content像这样http://i.imgur.com/tunmL9B.jpg 如果它在较小的屏幕上。＃content应根据屏幕尺寸缩小

如果它在大屏幕上，我希望它尽可能多地占用http://i.imgur.com/xB6bNsU.jpg。我该怎么做？

#wrapper{
width:100%;
}

#sidebar{float:left;width:250px;}
#content{float:left;width:900px}


.post{
margin:0px 0px 25px 0px;
padding:0px 0px 15px 0px;
}

.post .date{
float:left;
width:50px;
height:50px;
font-size:18px;
margin:0px 25px 0px 25px;
line-height:24px;
text-align:center;
}


.post h2{
font-size:20px;
line-height:24px;
}

谢谢！

Answer 1

您将要使用百分比作为宽度，而不是明确设置宽度

以下是您现在拥有的内容：

#sidebar{float:left;width:250px;}
#content{float:left;width:900px}

以下是如何更改它：

#sidebar{float:left;width:20%;}
#content{float:left;width:80%;}

这样，无论屏幕大小（或实际上是父元素的大小），侧边栏总是占20％（所以20% * 1000px = 200px和20% * 100px = 20px等）和内容总是占80％。

媒体查询

然而，最终，这只是回应的起点。想象一下有人从实际上只有100px宽的设备访问此页面。您可能希望开始堆叠元素而不是并排使用它们。这可以通过媒体查询来完成：

@media all and (max-width: 360px) {
  #sidebar, #content {
    float: none;
    width: 100%;
  }
}

此媒体查询将动态更新任何＆lt; = 360px的查看窗口的相应元素的CSS。在这种情况下，它会使每个占据屏幕的整个宽度。

这只是让您的网站响应的开始！祝你好运！

修改

如果您必须保持侧边栏的250px宽度，那么Fabrizio's answer是更好的解决方案。

Answer 2

只需写下

#sidebar{ float:left; width:250px;}
#content{ margin-left: 250px; }

侧边栏将保持其宽度，而您的内容将随着视口宽度增长。此处的媒体查询不是必需的，因此该示例甚至可以在IE<9

上运行

示例小提琴：http://jsfiddle.net/wn6fx/

Answer 3

我认为大多数人都错过了他的要求。他实际上希望文本随着div的缩小而缩小。我不认为可以用你想要的方式用CSS完成。您可以在div缩小尺寸时编写媒体查询以更改字体的大小，但这不是一个平滑的效果。您很可能需要使用javascript来实现此效果。顺便说一下，你链接的这个例子并不是真正的“响应”。如果你试图在手机上查看它，那将是不可读的，因为文本将像6px。

Answer 4

尝试

sidebar{width:250px;float:left;}
content{margin-left:250px;}

如何使这个正确的内容响应？

4 个答案: