1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 1200px; 9 height: 100px; 10 background-color: #87CEEB; 11 } 12 /*当浏览器窗口小于960时*/ 13 @media only screen and (min- 641px) and (max- 960px) { 14 div{ 15 width: 100%; 16 background-color: yellow; 17 } 18 } 19 /*当浏览器窗口小于640时*/ 20 @media only screen and (max- 640px) { 21 div{ 22 width: 100%; 23 background-color: #9ACD32; 24 } 25 } 26 /*当浏览器窗口大于等于960时*/ 27 @media only screen and (min- 961px) { 28 div{ 29 width: 100%; 30 background-color: #87CEEB; 31 } 32 } 33 </style> 34 </head> 35 <body> 36 <div></div> 37 </body> 38 </html>