响应式设计

    响应式设计简单说呢就是针对不同的屏幕分辨率应用不同的CSS样式，这里有两个关键点：

   一是如何在不修改DOM结构的前提下调整布局

   二是如何判断屏幕分辨率并应用对应的CSS

  以上两点应该不依赖于JS.

  (1) 实现第一点依靠的是流式布局，就是所有参与布局的DIV都用float:left，宽度都用百分比表示

                                                      图一

   

                                                    图二            

  

如上两个图所示，黄色DIV的宽度是60%，粉丝DIV宽度为40%，如果将黄色和粉色的宽度都改为 width=100%，那么从一行变成了2行。从而实现了不修改DOM实现布局变化

(2) HTML5提供了一种新的CSS语法——@media，学名是media Query，可以为不同的分辨率设定不同的样式CSS

    

@media only screen and (max-width:320px){     #head{width:100%;}}

上段代码含义就是当屏幕宽度小于等于320px时应用大括号中的样式。

@media only screen and(min-width:321px) and (max-width:480px) and (orientation:landscape){    //样式代码}

上段代码针对phone横屏的。宽度在321~480px之间，且“横向”的

除了上述两点，还需要在页面上增加一个viewport的meta标签，否则在手机上可能会有页面自动缩放的情况：

<meta name="viewport" content="width=device-width;initial-scale=1.0">

总结：响应式布局有三个关键点：

          1.流式布局 Liquid Layout

          2.媒体查询 Media Query  

         3.Viewport