响应式布局入门Demo

顾名思义，响应式布局就是为适应不同终端而形成的一种技术。自己在网上也有看到一些简单的Demo，但是刚刚开始看起来还是有点小吃力，这里就改成了最简单最直接的方式给大家看一下，有一点点的css和html基础都可以看得懂。

    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对不同尺寸的的机器给出不一样的css代码

@media screen and (min-width:900px) /*这个意思就是最小宽度为900的机器 也就是我们通俗所说的PC端*/
{
	#header,#footer
	{
	    width:100%;
	}

    #main
	{
	    width:100%;
	    height:400px;
    }

    #main-left
    {
	    width:20%;
	    height:400px;
	    border:solid 1px red;
	    float:left;  /*以下均要设置左浮动，保证在同一行*/
    }

    #main-center
    {
	    width:39%;
	    height:400px;
	    border:solid 1px red;
	    float:left;
    }

    #main-right
    {
        width:40%;
        height:400px;
        border:solid 1px red;
        float:left;
    }
}

/*分辨率在600~900*/
@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; /*隐藏内容右边*/
    }

}
/*手机*/
@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;  /*隐藏内容右边*/
    }
}

其实就是使用

@media screen and (max-width:600px)

进行判断针对不同的大小来给出不同的css样式

第一次写不是特别详细 欢迎大神指教

这个是正常的pc

当拉伸窗口到600~900之间也就是pad的尺寸就会执行第二套代码

最后一套就是俗称的手机端的啦~~