当前位置:主页 >> DIV+CSS >> 正文
响应式布局入门只看此一例
阅读:186 输入:2018-10-01 15:34:59

响应式布局就是为适应不同终端而形成的一种技术。

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样式。