<style>
body {
background-image: url("2.jpg")
}
h1 {
text-align: center; <!--居中-->
color: blue;
}
h2 {
margin-left: 60%; <!--左外边距-->
color: blue;
}
p {
text-indent: 32px; <!--缩进-->
font-size: 16px; <!--字体大小-->
line-height: 32px; <!--行高-->
color: blue;
}
img {
position: absolute; <!---->
left: 50%; <!---->
margin-left: -181px; <!---->
}
</style>
<style media="print"> <!--只针对打印模式-->
h1 {
color: black;
}
h2 {
color: black;
}
p {
color: black;
}
</style>
<style media="screen and (min-width: 512px) and (max-width: 1024px)"><!--screen是电脑屏幕，当象素高于512且低于1024时会更换背景相片-->
body {
background-image: url("1.jpg")
}
</style>
为什么打开之后缩小浏览器界面步更改图片

媒体查询不是这么用的，是用在CSS代码里面的
这样写：@sɴᴏᴡ screen and ……