@media screen and (min-width: 1200px) {
body {
background: blue
}
}
例子是1200像素显示body为蓝色，background的值是可以为图片的。
想要有多个媒体查询，需要一个个的写上去，设置好不同的分辨率。
根据现实中的分辨率大小来设置css来控制。
@media screen and (min-width: 200px) {
body {
font-size: 10px
}
}
@media screen and (min-width: 1000px) {
body {
font-size: 50px
}
}
扩展资料：
CSS3 @media 查询：
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
CSS 语法：
@media mediatype and|not|only (media feature) {
CSS-Code
}
媒体类型：
all：用于所有设备
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等。
speech：应用于屏幕阅读器等发声设备
不太明白你的问题，我举个例子比如页面代码如下
<body>
<div class="header">导航</div>
<div class="main">主内容区</div>
<div class="footer">copyright</div>
</body>
这时不需要其他代码，页面就已经撑满整个屏幕。
如果你是希望将页面大小锁定在一屏之内，可以尝试添加css
body { overflow:hidden }
手写，理解有误请追问，谢谢。
