css中如何通过调整窗口大小,呈现不同的图片？

html-css028

css中如何通过调整窗口大小,呈现不同的图片？,第1张

通过css3的媒体查询功能。不同的分辨率之下赋予标签不同的背景图片，可以实现上述功能。

@media screen and (min-width: 1200px) {

body {

background: blue

}

}

例子是1200像素显示body为蓝色，background的值是可以为图片的。

想要有多个媒体查询，需要一个个的写上去，设置好不同的分辨率。

不太明白你的问题，我举个例子

比如页面代码如下

<body>

<div class="header">导航</div>

<div class="main">主内容区</div>

<div class="footer">copyright</div>

</body>

这时不需要其他代码，页面就已经撑满整个屏幕。

如果你是希望将页面大小锁定在一屏之内，可以尝试添加css

body { overflow:hidden }

手写，理解有误请追问，谢谢。