案例一：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <meta name="viewport" content="width=device-width" /> 6 <title>test</title> 7 <style type="text/css"> 8 @media(max-320px){/*让屏幕宽度最大为320px的设备使用该css*/ 9 div#wrapper{ 10 width:320px;height:50px;background-color:green; 11 color:silver; 12 } 13 } 14 15 @media(min-360px) and (max-400px){/*让屏幕宽度从360px到400px的设备使用该css*/ 16 div#wrapper{ 17 width:100%;height:100px;background-color:red; 18 color:white; 19 } 20 } 21 </style> 22 </head> 23 <body> 24 <h1>Media Queries</h1> 25 <div id="wrapper"> 26 <h2>wrapper</h2> 27 </div> 28 </body> 29 </html>
案例二：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title>test</title> <style type="text/css"> @media(max-320px){ div#wrapper{ width:320px;height:50px;background-color:green; color:silver; } } @media(min-321px) and (max-400px){ div#wrapper{ width:100%;height:100px;background-color:red; color:white; } } </style> </head> <body> <h1>Media Queries</h1> <div id="wrapper"> <h2>wrapper</h2> </div> </body> </html>