前言
当你想用媒体查询时，就必须得用@media，而使用了@media查询，就可以对不同得媒体类型定义不同得样式，而@media，是可以针对不同得屏幕得大小来设置不同得样式，当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，也就是它得强大之处。
@media的使用语法：
@media mediatype and |not|only(media feature)
{
具体的样式内容
}@media的使用代码案例
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: lightgreen;
}
@media only screen and (max-width: 900px) {
body{
background-color: red;
}
}
</style>
</head>
<body>
<h2>当页面的宽度小于600px的时候，背景会变为浅红色，当宽度大于900px的时候，页面的背景就会变成浅绿色。当页面的高度小于600px的时候，页面变黄色，当页面的高度大于900px的时候，页面就会变成蓝色</h2>
</body>
</html>效果显示
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@media only screen and (max-height: 900px) {
body{
background-color: yellow;
}
}
@media only screen and (min-height: 600px) {
body{
background-color: blue;
}
}
</style>
</head>
<body>
<h2>当页面的宽度小于600px的时候，背景会变为浅红色，当宽度大于900px的时候，页面的背景就会变成浅绿色。当页面的高度小于600px的时候，页面变黄色，当页面的高度大于900px的时候，页面就会变成蓝色</h2>
</body>
</html>效果显示
希望能帮助到热爱编程的爱好者，谢谢观看！