版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38061191/article/details/82083276
min-width 等同于>=
max-width 等同于<=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@media only screen and (min-width: 400px) {
div{
transition: width 2s,height 2s;
height: 400px;
width: 400px;
background: red;
}
}
@media only screen and (min-width: 800px) {
div{
transition: width 2s,height 2s;
height: 800px;
width: 800px;
background: black;
}
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>