【CSS3初探之Media Queries】终于完成了的CSS3，我们来个终章总结！

前言

无论如何，学到这里，我可以自豪的告诉自己，我HTML5与CSS3学完了，不管我现在还记得住多少，我确确实实将他们学完了，还做了不少demo。

回想几个月前，我一直在纠结自己应该学习HTML5与CSS3，我应该加强js与css，却一直没有任何产出！

但是，我最近在两个星期就完成了HTML5与CSS3的初步学习，就此慢慢迈入HTML5与CSS3的大门，而且重新找回了学习的感觉，这些都为一个目标：

两年内，我要成为国内优秀的前端工程师！

我就发现理想与目标的力量是不可评估的，自从我有了明确的目标后，感觉做什么事都比较有干劲，我相信不久的将来我一定可以实现自己的目标！！！

好了，会话结束，我们来看看今天的主角：Media Queries

Media Queries

在CSS中，与媒体相关的样式定义是从CSS2.1开始的，CSS2.1定义了各种媒体类型，包括显示器、便携设备、电视剧等。

CSS3加入了Media Queries模块，该模块允许添加媒体查询（media query）表达式，用以指定媒体类型，然后根据媒体类型选择应该使用的样式。

比如：允许我们在不改变内容的情况下在样式表中选择一种页面的布局精确的适应不同的设备，从而改变用户体验。

我们知道在不同设备中浏览器窗口尺寸可能是不同的，若是只针对某个尺寸定制化网页，在其他设备就会惨不忍睹；

若是根据不同的尺寸制作不同的网页，又工作量过大，为了解决以上问题，便有了我们今天的Media Queries。

使用该模块，我们只需要为不同的尺寸编写不同的样式，然后根据浏览器尺寸选择样式即可。

基本应用

 1 <!DOCTYPE html>
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>
 6     <style type="text/css">
 7     #container { width: 960px; margin: auto; }
 8     #wrap { width: 740px; float: left; }
 9     p { line-height: 600px; text-align: center; font-weight: bold; margin: 0 0 20px 0; }
10     #main { width: 520px; float: right; background: yellow; }
11     #sub01 { width: 200px; float: left; background: orange; }
12     #sub02 { width: 200px; float: right; background: green; }
13     
14     /*--窗口1000px以上--*/
15     @media screen and (min-width: 1000px) 
16     {
17         #container { width: 1000px; }
18         #wrapper { width: 780px; float: left; }
19         #main { width: 560px; float: right; }
20         #sub01 { width: 200px; float: left; background: orange; }
21         #sub02 { width: 200px; float: right; background: green; }
22     }
23      /*--窗口640px以上、999px以下--*/
24     @media screen and (min-width: 1000px) and (max-width: 999px)
25     {
26         #container { width: 640px; }
27         #wrapper { width: 640px; float: none; }
28         #main { width: 420px; float: right; }
29         #sub01 { width: 200px; float: left; background: orange; }
30         #sub02 { width: 100%; float: right; background: green; }
31     }
32      /*--窗口639px以下*/
33     @media screen and (min-width: 1000px) and (max-width: 999px)
34     {
35         #container { width: 100%; }
36         #wrapper { width: 100%; float: none; }
37         #main { width: 100%; float: right; }
38         #sub01 { width: 100%; float: left; background: orange; }
39         #sub02 { width: 100%; float: right; background: green; }
40     }
41     
42     </style>
43 </head>
44 <body>
45     <div id="container">
46         <div id="wrapper">
47             <p id="main">
48                 main</p>
49             <p id="sub01">
50                 sub01</p>
51         </div>
52         <p id="sub02">
53             sub02</p>
54     </div>
55 </body>
56 </html>

因为不好在手机端做测试，我这里就不截图了，这块知识点应该得到重视，具体应用时，需要好好的查询下资料。

总结

从得知团队解散开始，我的心态经历了落寞、经历了压力，但在此过程中我看清了自己，我知道了自己的目标，知道了自己的理想！

于是从上上周陆陆续续的开始学习到今天，终于初步将HTML5与CSS3学习结束了！

通过本次学习大概知道了他们都做了些什么事情，我可以利用他们做些什么事情。

学习过程中其实感受到了HTML5+CSS3将要带来的变革，相信不用多久就会出现能媲美app的网站，并且会越来越多！！！

后续计划

这次只是初步学习，接下来会较深入的学习，希望能彻底掌握HTML5和CSS3，这次5.1放假给自己规划了一个任务，便是实现以下网站功能：

http://www.zhinengshe.com/index.html

我这里只做前端功能，做得好就都做了，做得不好便只做首页吧！！！希望通过实践能稍微巩固下最近所学的知识！！！

posted on 2013-04-27 14:16 叶小钗阅读(966) 评论(1) 编辑收藏举报