上面的代码要实现pc和手机的自适应响应式
时间: 2024-02-12 11:05:43 浏览: 55
好的,下面是增加响应式支持的代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>ChatGPT</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h1>ChatGPT</h1>
</div>
<div class="chat-history">
<ul>
<li class="message received-message">Hello, how can I help you?</li>
<li class="message sent-message">Can you recommend a good restaurant in the area?</li>
<li class="message received-message">Sure, what type of cuisine are you interested in?</li>
<li class="message sent-message">I'm in the mood for Italian food.</li>
<li class="message received-message">There's a great Italian restaurant called La Trattoria on Main Street.</li>
</ul>
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message here...">
<button>Send</button>
</div>
</div>
</body>
</html>
```
CSS 代码:
```css
/* 根据屏幕宽度设置响应式样式 */
@media only screen and (max-width: 768px) {
.chat-container {
max-width: 100%;
}
}
/* 通用样式 */
.chat-container {
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
.chat-header {
background-color: #4CAF50;
color: #fff;
padding: 10px;
text-align: center;
}
.chat-history {
height: 400px;
overflow-y: scroll;
padding: 10px;
}
.message {
margin: 10px;
padding: 10px;
border-radius: 10px;
}
.received-message {
background-color: #f1f0f0;
}
.sent-message {
background-color: #4CAF50;
color: #fff;
text-align: right;
}
.chat-input {
padding: 10px;
display: flex;
align-items: center;
}
.chat-input input {
flex: 1;
padding: 10px;
border-radius: 20px;
border: none;
margin-right: 10px;
}
.chat-input button {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
border: none;
cursor: pointer;
}
```
在上述代码中,我们使用了 `@media` 媒体查询来针对不同屏幕宽度设置不同的样式。在屏幕宽度小于等于 768px 时,将聊天框的宽度设置为 100%。这里的 768px 是一个常用的响应式断点,可以根据实际需求进行调整。
同时,我们还在 HTML 代码中添加了 `meta` 标签,用于设置视口宽度和初始缩放比例,以便在移动设备上获得更好的可视化效果。
这样,在不同的设备上打开 ChatGPT 页面时,页面会自动根据屏幕宽度进行响应式调整,以适应不同的设备。