您可以使用以下代码让网页聊天室自适应不同的屏幕大小:

css
.chat-room {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.message-container {
max-height: 400px;
overflow-y: auto;
}
.message {
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.input-box {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}
@media only screen and (max-width: 600px) {
.chat-room {
max-width: 100%;
}
}
这段代码会使聊天室容器在屏幕宽度小于600px时自适应屏幕大小,同时限制最大宽度为800px。您可以根据实际需求调整容器的样式和尺寸。

查看详情

查看详情