怎样用CSS制作响应式布局

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

3、 第三步，接下来是实现响应式布局的关键CSS代码内容了，写CSS来实现响应式布局。 通过在head头部添加<style>标签，在里面写CSS代码（当然，也可以将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;}

5、 第五步，当屏幕宽度在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;/*隐藏内容右边*/ }}

7、 最后，在浏览器中查看效果（其实每写完一步代码就应该查看效果，即调试），如图。如果要切换至手机端，可以借助Google Chrome浏览器来查看，按F12,点击图上按钮，于是就可以看到简单的响应式布局了。如图： 附：本经验关键词：html（CSS）响应式布局怎么写、html（CSS）制作响应式布局代码、css实现响应式布局代码、前端响应式布局如何实现、开发响应式布局、响应式布局实现方法、Sublime Text3制作响应式布局 更多关于HTML/CSS的经验请点击下面的“经验引用”