现阶段，随着互联网的发展，人们浏览网页的方式也不仅仅是在电脑PC端了，而更多的是移动端用户。因此，前端开发者面临的问题是，应该怎样开发出适应不同用户的浏览体验的网页呢？响应式布局因此应运而生。
响应式布局，顾名思义，即为适应不同终端而形成的一种技术。下面，小编通过自己的，以一个简单的例子来为大家介绍前端怎样用
CSS制作响应式布局。
操作方法
（01）前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来制作响应式布局。本例选择制作一个简单的包含头部、中间内容、尾部的布局页面。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个HTML文件，通过Tab快捷键迅速创建一个HTML模板，并命名标题。如图所示：
（02）第二步，在Body标签里添加三个主DIV标签，分别表示头部，内容和底部。然后，在内容DIV内又添加三个子DIV,分别表示左边，中间，右边。并且给出对应的ID名。对应的代码如下：<body><div id="header">头部</div><div id="main"><div id="main-left">内容-左边</div><div id="main-center">内容-中间</div><div id="main-right">内容-右边</div></div><div id="footer">底部</div></body>
（03）第三步， 接下来是实现响应式布局的关键CSS代码内容了，写CSS来实现响应式布局。 通过在head头部添加<style>标签，在里面写CSS代码（当然，也可以将CSS代码写在单独的文件中，然后引用）。首先设置全局样式，当屏幕宽度大于900px的时候，即大型电脑PC端，对应的头部，尾部，内容的CSS代码，对应的代码如下：*{padding:0px;margin:0px;font-family:"微软雅黑";}#header{height:100px;border:solid 1px red;margin:0px auto;}#main{margin:10px auto;height:400px;}#footer{margin:0px auto;height:100px;border:solid 1px red;}
（04）第四步，当屏幕最小宽度为900px时，相当于笔记本PC端，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：@media screen and (min-width:900px){#header,#footer{width:800px;}#main{width:800px;height:400px;}#main-left{width:200px;height:400px;border:solid 1px red;float:left; /*以下均要设置左浮动，保证在同一行*/}#main-center{width:394px;height:400px;border:solid 1px red;float:left;}#main-right{width:200px;height:400px;border:solid 1px red;float:left;}}
（05）第五步，当屏幕宽度在600~900px时，相当于平板电脑大小的设备，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：@media screen and (min-width:600px) and (max-width:900px){#header,#footer{width:600px;}#main{width:600px;height:400px;;}#main-left{width:200px;height:400px;border:solid 1px red;float:left; /*以下均要设置左浮动，保证在同一行*/}#main-center{width:396px;height:400px;border:solid 1px red;float:left;}#main-right{display:none; /*隐藏内容右边*/}}
（06）第六步， 写当屏幕宽度在小于等于600px时，即在移动端（手机端），其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：@media screen and (max-width:600px){#header,#footer{width:300px;}#main{width:300px;height:400px;}#main-left{display:none; /*隐藏内容左边*/}#main-center{width:300px;height:400px;border:solid 1px red;}#main-right{display:none; /*隐藏内容右边*/}}
（07）最后，在浏览器中查看效果（其实每写完一步代码就应该查看效果，即调试），如图。如果要切换至手机端，可以借助Google Chrome浏览器来查看，按F12,点击图上按钮，于是就可以看到简单的响应式布局了。如图：附：本经验关键词：html（CSS）响应式布局怎么写、html（CSS）制作响应式布局代码、css实现响应式布局代码、前端响应式布局如何实现、开发响应式布局、响应式布局实现方法、Sublime Text3制作响应式布局更多关于HTML/CSS的经验请点击下面的“经验引用”
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://i2.kuzhigu.com/108a738b/01d326d808/5a8e758d5d628437/07cf32d80c64d47b745925acc759489095-s.jpg "HTML网页制作：[17]CSS常用样式字体及颜色属性")
