smelikecat

导航

Media Queries简单案例一 

案例一： 

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-width:320px){/*让屏幕宽度最大为320px的设备使用该css*/
 9                 div#wrapper{
10                     width:320px;height:50px;background-color:green;
11                     color:silver;
12                 }
13             }
14             
15             @media(min-width:360px) and (max-width: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-width:320px){
                div#wrapper{
                    width:320px;height:50px;background-color:green;
                    color:silver;
                }
            }
            
            @media(min-width:321px) and (max-width: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>

 

posted on 2014-08-13 12:20  smelikecat  阅读(173)  评论(0)  编辑  收藏  举报