html响应式布局好学嘛,html自己写响应式布局（说起来很高大上的样子，但是其实很简单）...

第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个HTML文件，通过Tab快捷键迅速创建一个HTML模板，并命名标题。

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

头部

内容-左边

内容-中间

内容-右边

底部

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

*

{

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;

}

第四步，当屏幕最小宽度为900px时，相当于笔记本PC端，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：

@media screen and (min-900px)

{

#header,#footer

{

800px;

}

#main

{

800px;

height:400px;

}

#main-left

{

200px;

height:400px;

border:solid 1px red;

float:left;  /*以下均要设置左浮动，保证在同一行*/

}

#main-center

{

394px;

height:400px;

border:solid 1px red;

float:left;

}

#main-right

{

200px;

height:400px;

border:solid 1px red;

float:left;

}

}

第五步，当屏幕宽度在600~900px时，相当于平板电脑大小的设备，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：

@media screen and (min-600px) and (max-900px)

{

#header,#footer

{

600px;

}

#main

{

600px;

height:400px;;

}

#main-left

{

200px;

height:400px;

border:solid 1px red;

float:left; /*以下均要设置左浮动，保证在同一行*/

}

#main-center

{

396px;

height:400px;

border:solid 1px red;

float:left;

}

#main-right

{

display:none; /*隐藏内容右边*/

}

}

第六步， 写当屏幕宽度在小于等于600px时，即在移动端(手机端)，其对应的头部、尾部，内容以及内容内部包含部分的CSS代码，对应的代码如下：

@media screen and (max-600px)

{

#header,#footer

{

300px;

}

#main

{

300px;

height:400px;

}

#main-left

{

display:none; /*隐藏内容左边*/

}

#main-center

{

300px;

height:400px;

border:solid 1px red;

}

#main-right

{

display:none;  /*隐藏内容右边*/

}

}

最后说一下，其实也就相当于判断语句，判断屏幕宽度根据屏幕的宽度来设置相应的宽度，这里设置宽度个人写完后觉得用百分比来设置其实还要简单点，看情况吧。

=。=