<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@media screen and (max-width: 299px) { /*page <= 299px, less than 300*/
body {
background-color: #ff0;
}
}
@media screen and (min-width: 300px) and (max-width: 399px) {
/*page is 300 to 399px*/
body {
background-color: #f00;
}
}
@media screen and (min-width: 400px) and (max-width: 499px) {
/*page is 400 to 499px*/
body {
background-color: #0f0;
}
}
@media screen and (min-width: 500px) { /*page >= 500 px*/
body {
background-color: #00f;
}
}
h1 {
font: normal normal bold 24pt Verdana;
color: #fff;
text-shadow: #000 1px 1px 0px;
}
</style>
</head>
<body>
<h1>resize me</h1>
</body>
</html>
【media】
