【练习】响应式布局_html/css_WEB-ITnose

本文参考是参考http://www.netmagazine.com/tutorials/build-basic-responsive-site-css做的练习。

文中作者阐述了对于响应式设计不应该针对不同的终端显示不同的内容，当用户在pc上可以查到的内容，在移动端却怎么也找不到，这是很困惑的一件事情。所以响应式设计要做的是适当的缩放，针对不同的设备显示适当的布局，而不是改变内容。所以响应式布局的是利用流式布局（利用百分比设置各元素宽度）和css3的Media Query来实现的。

下面做一个简单的响应式布局的小练习：

效果可以参考http://www.netmagazine.com/files/tutorials/demos/2013/01/build-a-basic-responsive-site-with-css/demo/demo.html

1.首先确定文档结构，两列布局。

             Responsive                
                                                                                    skip to main content                                                               
Demo
                                                   Home                      About                      Work                      Contact                                           


      
查看更多关于【练习】响应式布局_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did102232