关于Web响应式布局

昨天百度笔试，有道题是要求写出响应式Web布局。之前没有了解过这方面的CSS，当时只能凭自己的知识，用JS+CSS来做。

回来google了下，现在对这块知识有了一定的认识。

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

主要利用CSS3中的Media Query（媒介查询）

使用方法：

在原本基础的CSS代码之后，插入

1. @media screen and (max-width:980px){
2.    //CSS代码
3. }

此代码用于屏幕宽度小于980像素的设备。

对于不同的设备，可以根据不同的最大宽度值，分别写出对应的上述代码，这样，浏览器就能根据不同设备做出不同布局。

我的网页在不同设备上的CSS代码如下，分成980px,650px,480px三个部分：

1. @media screen and (max-width: 980px) {
2.  
3. #pagewrap{
4. 95%;
5. }
6. #content{
7. width:60%;
8. padding: 3% 4%;
9. }
10. #sidebar{
11. width:30%;
12. }
13. }
14.  
15. @media screen and (max-width: 650px) {
16.  
17.    #header {
18.       height: auto;
19.    }
20. #content {
21. width:auto;
22. float:none;
23. margin:20px 0;
24. }
25. #sidebar {
26. width:100%;
27. float:none;
28. margin:0;
29. }
30. }
31.  
32. @media screen and (max-width: 480px) {
33.  
34.    html {
35.       -webkit-text-size-adjust: none;
36.    }
37. }

之前对CSS用的不多，最近才在恶补，发现CSS设计也是蛮有意思的，只是学习过程有点繁琐有点缓慢。

注意：为了保证代码能根据不同屏幕的参数进行适应，每个CSS选择器在不同部分要相对应。

如：

在正常情况下的CSS样式你写成：div#content，在最大为980px情况下写成：#content，这样情况下，浏览器是不认的。所以，要么都写成div#content，要么都写成#content。

不过，正常情况下，.class和#id都是舍去之前的元素符。

 

关于@media query的详细教程，可以参考：

http://www.jiawin.com/response-type-layout-design/

 

关于CSS的常用技巧，可以参考：

http://developer.51cto.com/art/200511/11613.htm