1、参考资料
一天完成把PC网站改为自适应!原来这么简单! http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html
demo:
header、container、slidder、footer这种布局的效果
http://webdesignerwall.com/demo/adaptive-design/final.html#
学习响应式设计的15个优秀网页作品
工具:
firefox里的响应式视图、chrome浏览器里“”开发者工具“”
响应式设计的方法
1、用@media来做,如:
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}