轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局
媒体查询，针对不同的媒体类型定制不同的样式规则。在网站开发中，可以创建响应式布局。
一、初步认识媒体查询在响应式布局中的应用
下面实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <meta charset="utf-8">
6 <title>test</title>
7 <style>
8 .wrapper {overflow:auto;}
9
10 #main {margin-left: 4px;}
11 #leftsidebar {float: none;width: auto;}
12 #menulist {margin:0;padding:0;}
13
14 .menuitem {
15 background:#CDF0F6;
16 border:1px solid #d4d4d4;
17 border-radius:4px;
18 list-style-type:none;
19 margin:4px;
20 padding:2px;
21 }
22
23 @media screen and (min-width: 480px) {
24 #leftsidebar {width:200px;float:left;}
25 #main {margin-left:216px;}
26 }
27 </style>
28 </head>
29 <body>
30
31 <div class="wrapper">
32 <div id="leftsidebar">
33 <ul id="menulist">
34 <li class="menuitem">Menu-item 1</li>
35 <li class="menuitem">Menu-item 2</li>
36 <li class="menuitem">Menu-item 3</li>
37 <li class="menuitem">Menu-item 4</li>
38 <li class="menuitem">Menu-item 5</li>
39 </ul>
40 </div>
41 <div id="main">
42 <h1>重置浏览器窗口查看效果！</h1>
43 <p>在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。</p>
44 </div>
45 </div>
46
47 </body>
48 </html>
View Code
关键代码：
1 @media screen and (min-width: 480px) {
2 #leftsidebar {width: 200px; float: left;}
3 #main {margin-left:216px;}
4 }
screen，是最常见的媒体类型的一种，用于电脑屏幕，平板电脑，智能手机等
and，操作符，表示同时具备的条件，敲代码时两边一定有空格
min-width:定义输出设备中的页面最小可见区域宽度
以上代码的意思就是在可见区域宽度大于等于480px时，leftsidebar与main左右排列（小于480px时，leftsidebar和main都是块元素，当然是上下排列）
二、媒体查询与bootstrap的姻缘
很多网页都是基于网格设计的，响应式网格视图通常是12列，宽度为100%，在浏览器窗口大小调整时会自动伸缩（和bootstrap的栅格系统是不是相似?）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <meta charset="utf-8">
6 <title>test</title>
7 <style>
8 * {
9 box-sizing: border-box;
10 }
11 .row:after {
12 content: "";
13 clear: both;
14 display: block;
15 }
16 [class*="col-"] {
17 float: left;
18 padding: 15px;
19 }
20 html {
21 font-family: "Lucida Sans", sans-serif;
22 }
23 .header {
24 background-color: #9933cc;
25 color: #ffffff;
26 padding: 15px;
27 }
28 .menu ul {
29 list-style-type: none;
30 margin: 0;
31 padding: 0;
32 }
33 .menu li {
34 padding: 8px;
35 margin-bottom: 7px;
36 background-color :#33b5e5;
37 color: #ffffff;
38 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
39 }
40 .menu li:hover {
41 background-color: #0099cc;
42 }
43 .aside {
44 background-color: #33b5e5;
45 padding: 15px;
46 color: #ffffff;
47 text-align: center;
48 font-size: 14px;
49 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
50 }
51 .footer {
52 background-color: #0099cc;
53 color: #ffffff;
54 text-align: center;
55 font-size: 12px;
56 padding: 15px;
57 }
58 /* For mobile phones: */
59 [class*="col-"] {
60 width: 100%;
61 }
62 @media only screen and (min-width: 600px) {
63 /* For tablets: */
64 .col-m-1 {width: 8.33%;}
65 .col-m-2 {width: 16.66%;}
66 .col-m-3 {width: 25%;}
67 .col-m-4 {width: 33.33%;}
68 .col-m-5 {width: 41.66%;}
69 .col-m-6 {width: 50%;}
70 .col-m-7 {width: 58.33%;}
71 .col-m-8 {width: 66.66%;}
72 .col-m-9 {width: 75%;}
73 .col-m-10 {width: 83.33%;}
74 .col-m-11 {width: 91.66%;}
75 .col-m-12 {width: 100%;}
76 }
77 @media only screen and (min-width: 768px) {
78 /* For desktop: */
79 .col-1 {width: 8.33%;}
80 .col-2 {width: 16.66%;}
81 .col-3 {width: 25%;}
82 .col-4 {width: 33.33%;}
83 .col-5 {width: 41.66%;}
84 .col-6 {width: 50%;}
85 .col-7 {width: 58.33%;}
86 .col-8 {width: 66.66%;}
87 .col-9 {width: 75%;}
88 .col-10 {width: 83.33%;}
89 .col-11 {width: 91.66%;}
90 .col-12 {width: 100%;}
91 }
92 </style>
93 </head>
94 <body>
95
96 <div class="header">
97 <h1>header</h1>
98 </div>
99
100 <div class="row">
101 <div class="col-3 col-m-3 menu">
102 <ul>
103 <li>The Flight</li>
104 <li>The City</li>
105 <li>The Island</li>
106 <li>The Food</li>
107 </ul>
108 </div>
109
110 <div class="col-6 col-m-9">
111 <h1>The City</h1>
112 <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
113 </div>
114
115 <div class="col-3 col-m-12">
116 <div class="aside">
117 <h2>What?</h2>
118 <p>Chania is a city on the island of Crete.</p>
119 <h2>Where?</h2>
120 <p>Crete is a Greek island in the Mediterranean Sea.</p>
121 <h2>How?</h2>
122 <p>You can reach Chania airport from all over Europe.</p>
123 </div>
124 </div>
125
126 </div>
127
128 <div class="footer">
129 <p>Resize the browser window to see how the content respond to the resizing.</p>
130 </div>
131
132 </body>
133 </html>
View Code
针对桌面设备(电脑):
第一和第三部分跨越 3 列。中间部分跨域 6 列
针对平板设备:
第一部分跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列
<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
针对手机设备：上下排列
[class*="col-"] {
width: 100%;
}
提示：上边的代码中关键的部分还有：
1 [class*="col-"]{
2 float:left;
3 }
4 *{
5 box-sizing:border-box;
6 }
具体原因不再解释，读者有兴趣可以看我的博客里关于浮动和盒子模型部分
上边这个例子和bootstrap更接近了一步
我们再来说说什么是bootstrap？Bootstrap是非常受欢迎的响应式前端框架，它是基于HTML、JavaScript、CSS的，它简洁灵活，使Web开发更加快捷
下面举一个简单例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>Bootstrap Example</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 8 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 9 <script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> 10 </head> 11 <body> 12 13 <div class="container"> 14 <div class="jumbotron"> 15 <h1>My First Bootstrap Page</h1> 16 <p>Resize this responsive page to see the effect!</p> 17 </div> 18 <div class="row"> 19 <div class="col-sm-4"> 20 <h3>Column 1</h3> 21 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 22 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 23 </div> 24 <div class="col-sm-4"> 25 <h3>Column 2</h3> 26 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 27 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 28 </div> 29 <div class="col-sm-4"> 30 <h3>Column 3</h3> 31 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 32 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 33 </div> 34 </div> 35 </div> 36 37 </body> 38 </html>
View Code
bootstrap栅栏系统css中的col-sm-*的意义：
.col-sm- 小屏幕 平板 (≥768px)
当width>=768px时，Column1、Column2、Column3左中右三列（一行内）
当width<768px时，Column1、Column2、Column3上中下三行排列
由此可见，Bootstrap就是利用了CSS的媒体查询才实现的响应式布局（当然更复杂的功能还得用到JavaScript）！
赞 (0)