html响应式网页制作
时间: 2023-12-15 18:32:55 浏览: 33
HTML响应式网页制作需要使用CSS的媒体查询来实现。媒体查询是一种CSS3的技术,可以根据设备的特性(如屏幕宽度、高度、方向、分辨率等)来应用不同的CSS样式。以下是一个简单的HTML响应式网页制作的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式网页</title>
<style>
/* 默认样式 */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
h1 {
color: #333;
font-size: 2em;
margin: 0;
padding: 20px;
text-align: center;
}
p {
color: #666;
margin: 0;
padding: 20px;
text-align: justify;
}
/* 媒体查询 */
@media screen and (max-width: 768px) {
h1 {
font-size: 1.5em;
}
p {
font-size: 1em;
}
}
</style>
</head>
<body>
<h1>响应式网页</h1>
<p>这是一个响应式网页的例子。在窗口宽度小于等于768像素时,标题和段落的字体大小会变小。</p>
</body>
</html>
```
在上面的例子中,我们使用了一个媒体查询来设置窗口宽度小于等于768像素时的样式。在这个样式中,我们将标题和段落的字体大小都变小了。