CSS-18-媒体查询

Posted 2022-05-23 qinqin-me

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于CSS-18-媒体查询的主要内容，如果未能解决你的问题，请参考以下文章