利用html媒体查询方式创建一个网页,当设备的屏幕小于600px背景红色,屏幕出现一个蓝色三角形。当屏幕大于1000px时背景蓝色,屏幕出现一个红色三角形。否则屏幕背景为绿色。显示一个黄色三角形。
时间: 2024-05-06 16:17:51 浏览: 9
可以使用以下代码来实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>Media Queries Demo</title>
<style type="text/css">
body {
background-color: green;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
position: absolute;
content: "";
left: 50%;
transform: translateX(-50%);
}
@media only screen and (max-width: 600px) {
body {
background-color: red;
}
.triangle {
border-width: 0 50px 50px 50px;
border-color: transparent transparent red transparent;
top: 20px;
}
}
@media only screen and (min-width: 1000px) {
body {
background-color: blue;
}
.triangle {
border-width: 50px 50px 0 50px;
border-color: blue transparent transparent transparent;
bottom: 20px;
}
}
@media only screen and (min-width: 600px) and (max-width: 1000px) {
.triangle {
border-width: 50px 50px 0 50px;
border-color: yellow transparent transparent transparent;
bottom: 20px;
}
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
```
其中,`@media` 规则用于指定在不同的屏幕大小下应用不同的样式。在上面的代码中,我们使用了三个 `@media` 规则:
- 当屏幕宽度小于 600px 时,背景色为红色,屏幕上方出现一个红色三角形。
- 当屏幕宽度大于等于 1000px 时,背景色为蓝色,屏幕下方出现一个蓝色三角形。
- 当屏幕宽度在 600px 和 1000px 之间时,背景色为绿色,屏幕下方出现一个黄色三角形。
在这个例子中,我们创建了一个空的 `div` 元素,并使用绝对定位和 `transform` 属性来将其水平居中。然后,我们使用 `border` 属性来创建三角形,并在不同的 `@media` 规则中修改其样式以实现颜色和位置的变化。
注意,在 `@media` 规则中定义的样式会覆盖其他样式,因此要确保按照需要定义所有必要的样式。