<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@media only screen and (min-width:1001px ) {
#aa{
background-color: red;
font-size: 24px;
}
}
@media only screen and (min-width:600px ) and (max-width:1000px) {
#aa{
background-color: blue;
font-size: 18px;
}
}
@media only screen and (min-width:400px )and (max-width:599px) {
#aa{
background-color: orange;
font-size: 12px;}
}
#aa{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="aa">
下午有事
</div>
<div id="a1">
学习java
</div>
</body>
</html>
