CSS-18-媒体查询 

 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-width: 641px) and (max-width: 960px) {
14                 div{
15                     width: 100%;
16                     background-color: yellow;
17                 }
18             }
19             /*当浏览器窗口小于640时*/
20             @media only screen and (max-width: 640px) {
21                 div{
22                     width: 100%;
23                     background-color: #9ACD32;
24                 }
25             }
26             /*当浏览器窗口大于等于960时*/
27             @media only screen and (min-width: 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>

 

posted @ 2019-07-28 15:12  我只是一个码农  阅读(160)  评论(0)  编辑  收藏  举报