第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个HTML文件，通过Tab快捷键迅速创建一个HTML模板，并命名标题。
第二步，在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>
第三步， 接下来是实现响应式布局的关键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;
}
第四步，当屏幕最小宽度为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;
}
}
第五步，当屏幕宽度在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; /*隐藏内容右边*/
}
}
第六步， 写当屏幕宽度在小于等于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; /*隐藏内容右边*/
}
}
最后说一下，其实也就相当于判断语句，判断屏幕宽度根据屏幕的宽度来设置相应的宽度，这里设置宽度个人写完后觉得用百分比来设置其实还要简单点，看情况吧。
=。=
总结以上是内存溢出为你收集整理的html自己写响应式布局（说起来很高大上的样子，但是其实很简单）全部内容，希望文章能够帮你解决html自己写响应式布局（说起来很高大上的样子，但是其实很简单）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）