前端_响应式

1. 前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来制作响应式布局。本例选择制作一个简单的包含头部、中间内容、尾部的布局页面。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个HTML文件，通过Tab快捷键迅速创建一个HTML模板，并命名标题。如图所示：

   
2.        第二步，在Body标签里添加三个主DIV标签，分别表示头部，内容和底部。然后，在内容DIV内又添加三个子DIV,分别表示左边，中间，右边。并且给出对应的ID名。对应的代码如下：

    

   头部

    

        

   内容-左边

        

   内容-中间

        

   内容-右边

    

    

   底部

   
3.        第三步， 接下来是实现响应式布局的关键CSS代码内容了，写CSS来实现响应式布局。 通过在head头部添加