码迷,mamicode.com
首页 > Web开发 > 详细

CSS-18-媒体查询

时间:2019-07-28 15:50:56      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:screen   media   媒体查询   code   scree   tle   and   oct   max   

 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-媒体查询

标签:screen   media   媒体查询   code   scree   tle   and   oct   max   

原文地址:https://www.cnblogs.com/qinqin-me/p/11259075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!