响应式设计

1、参考资料

一天完成把PC网站改为自适应！原来这么简单！ http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html

 Responsive设计的关键三步

demo:

header、container、slidder、footer这种布局的效果

 

http://webdesignerwall.com/demo/adaptive-design/final.html#

 

学习响应式设计的15个优秀网页作品

工具：

firefox里的响应式视图、chrome浏览器里“”开发者工具“”

 

响应式设计的方法

１、用@media来做，如：

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}