Html 我如何使此正确的内容具有响应性？

我希望这样就满足了 如果是在较小的屏幕上，#内容应根据屏幕大小缩小

如果它在大屏幕上，我希望它能像这样占据尽可能多的空间。我该怎么做

#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;
}

---

谢谢大家!

您将希望对宽度使用百分比，而不是显式设置宽度

以下是您现在拥有的：

#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%;
  }
}

此媒体查询将动态更新任何刚刚写入的查看窗口的相应元素的CSS

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

---

侧边栏将保持其宽度，而您的内容将随着视口宽度的增加而增加。这里的Mediaqueries并不是真正必要的，所以这个例子甚至可以在

IE上使用，我认为大多数人都没有理解他的要求。实际上，他希望文本随着div的缩小而缩小。我不认为这可以通过CSS来实现。您可以在div减小大小时编写媒体查询，以更改字体大小，但这不是一个平滑的效果。您很可能需要使用javascript来实现此效果。顺便说一句，你链接的这个例子并不是真正的“响应”。如果您试图在手机上查看，它将无法读取，因为文本将类似于6px。
试试看

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

请参阅此JSFIDLE获取完整的HTML。在发布到本网站之前，您应该始终尝试用谷歌搜索您的问题。谷歌搜索“响应性网页设计”将回答你的问题。我不希望侧边栏是“响应性”的，我希望它的宽度固定在250px。我如何在不改变边栏宽度的情况下使内容更具响应性？嗯…让我再摆弄一下小提琴，我会更新我的答案似乎这就是我想要的。。。谢谢还有其他方法吗？这与我的答案有什么不同？我相信大多数人之所以认为他是指响应性的，是因为很难理解为什么你想要改变字体大小。我知道这是否只是为了改变页眉大小，但对于内容，屏幕的大小不会改变什么字体最适合用户阅读。我不会假装我知道为什么。。。只是说它被搞糊涂了。如果你看他链接的例子，它会告诉你他想要什么。我假设这可能是一个学校项目或其他什么，因为这不是使其响应的正确方法。