现阶段，随着互联网的发展，人们浏览网页的方式也不仅仅是在电脑PC端了，而更多的是移动端用户。因此，前端开发者面临的问题是，应该怎样开发出适应不同用户的浏览体验的网页呢？响应式布局因此应运而生。响应式布局，顾名思义，即为适应不同终端而形成的一种技术。下面，小编通过自己的经验，以一个简单的例子来为大家介绍前端怎样用CSS制作响应式布局。
工具/原料
1
Sublime Text 3编辑器 (也可选择其他编辑器)
2
Google Chrome浏览器(或其他浏览器)
方法/步骤
1
前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来制作响应式布局。本例选择制作一个简单的包含头部、中间内容、尾部的布局页面。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个HTML文件，通过Tab快捷键迅速创建一个HTML模板，并命名标题。如图所示：
2
第二步，在Body标签里添加三个主DIV标签，分别表示头部，内容和底部。然后，在内容DIV内又添加三个子DIV,分别表示左边，中间，右边。并且给出对应的ID名。对应的代码如下：
头部
内容-左边
内容-中间
内容-右边
3
第三步， 接下来是实现响应式布局的关键CSS代码内容了，写CSS来实现响应式布局。 通过在head头部添加