响应式布局

最新推荐文章于 2025-05-12 13:02:55 发布

weixin_44387746

最新推荐文章于 2025-05-12 13:02:55 发布

阅读量91

点赞数

顾名思义，响应式布局就是为适应不同终端而形成的一种技术。自己在网上也有看到一些简单的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.
注：iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
3.
注：iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
4.
上面整理了一些常用的meta标签一般在手机上也会设置让用户不允许对屏幕进行拉伸。
HTML:

内容-左边

内容-中间

内容-右边

这个为了布局简单易用就做了比较粗暴的上中下三个部分。

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