媒体查询
<!DOCTYPE html>
<html>
<head>
<title>媒体查询练习</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 600px;
height: 600px;
margin-top: 10px;
margin-left: 10px;
background-color: red;
}
@media screen and (max-width: 500px) {
div{
width: 220px;
height: 220px;
display: inline-block;
}
}
@media screen and (min-width: 800px) {
div{
width: 800px;
height: 220px;
display: inline-block;
}
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
