昨天百度笔试，有道题是要求写出响应式Web布局。之前没有了解过这方面的CSS，当时只能凭自己的知识，用JS+CSS来做。
回来google了下，现在对这块知识有了一定的认识。
就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
主要利用CSS3中的Media Query（媒介查询）
使用方法：
在原本基础的CSS代码之后，插入
@media screen and (max-width:980px){ //CSS代码 }此代码用于屏幕宽度小于980像素的设备。
对于不同的设备，可以根据不同的最大宽度值，分别写出对应的上述代码，这样，浏览器就能根据不同设备做出不同布局。
我的网页在不同设备上的CSS代码如下，分成980px,650px,480px三个部分：
@media screen and (max-width: 980px) { #pagewrap{ width:95%; } #content{ width:60%; padding: 3% 4%; } #sidebar{ width:30%; } } @media screen and (max-width: 650px) { #header { height: auto; } #content { width:auto; float:none; margin:20px 0; } #sidebar { width:100%; float:none; margin:0; } } @media screen and (max-width: 480px) { html { -webkit-text-size-adjust: none; } }之前对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
转载于:https://www.cnblogs.com/yangzec/p/3332799.html
