响应式布局就是为适应不同终端而形成的一种技术。
1.<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport" />表示强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
2.<meta content="yes" name="apple-mobile-web-app-capable" />iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
3.<meta content="black" name="apple-mobile-web-app-status-bar-style" />iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
4.<meta content="telephone=no" name="format-detection" />
以上常用的meta标签 一般在手机上也会设置让用户不允许对屏幕进行拉伸。
页面的html代码如下：
<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>
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;
}
然后所谓的响应式其实就通过不同的css对不同尺寸的的机器给出不一样的css代码。
@media screen and (min-width:900px) /*这个意思就是最小宽度为900的机器 也就是我们通俗所说的PC端*/
{
---详细代码见运行窗口---
}
/*分辨率在600~900*/
@media screen and (min-width:600px) and (max-width:900px)
{
---详细代码见运行窗口---
}
/*手机--隐藏左右边栏*/
@media screen and (max-width:600px)
{
---详细代码见运行窗口---
}
使用方法：@media screen and (max-width:600px)，进行判断针对不同的大小来给出不同的css样式。