给我写一个网页html适应手机和电脑适配案例
时间: 2023-12-13 19:05:15 浏览: 25
好的,以下是一个简单的适应手机和电脑的HTML页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>适应手机和电脑的页面</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
.title {
font-size: 2rem;
margin-bottom: 1rem;
}
.content {
font-size: 1.5rem;
text-align: center;
padding: 1rem;
background-color: white;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
border-radius: 0.5rem;
width: 90%;
max-width: 30rem;
}
@media screen and (min-width: 768px) {
.container {
flex-direction: row;
}
.title {
font-size: 4rem;
margin-right: 2rem;
}
.content {
font-size: 2rem;
padding: 2rem;
width: 50%;
max-width: 40rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="title">适应手机和电脑的页面</div>
<div class="content">
<p>这是一个适应手机和电脑的页面示例。</p>
<p>使用CSS Flexbox和媒体查询可以实现页面在不同屏幕尺寸下的适配。</p>
<p>在手机上,标题和内容垂直居中,宽度为90%;在电脑上,标题和内容水平排列,宽度为50%。</p>
</div>
</div>
</body>
</html>
```
这个页面使用了CSS Flexbox布局和媒体查询,可以在不同屏幕尺寸下实现适配。在手机上,标题和内容垂直居中,宽度为90%;在电脑上,标题和内容水平排列,宽度为50%。同时,使用Viewport meta标签确保页面在不同设备上正确地显示。