响应式布局实例

最新推荐文章于 2023-05-15 20:13:36 发布

xlb_123

最新推荐文章于 2023-05-15 20:13:36 发布

阅读量328

点赞数

分类专栏： web前端开发 css相关

web前端开发同时被 2 个专栏收录

153 篇文章 1 订阅

订阅专栏

css相关

33 篇文章 0 订阅

订阅专栏

静态布局

意思就是只是针对某个屏幕下设计的网页，当屏幕大小改变时，页面布局不会发生变化，就像经常所看到的滚动条。

自适应布局

特点是分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。

流式布局

特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。

响应式布局

这个就好理解了，意思就是分别为不同的屏幕设计的布局方式，可以理解成自适应布局和流程布局的结合。

结合上述文字描述，再观察如下的页面实际效果，应该可以把这几个概念搞清楚：

http://wow.techbrood.com/fiddle/1753

响应式布局实例：

html:

<!DOCTYPE html>
<html>
<head>
    <title>响应式布局-样式表中内嵌法</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="header">header</div>
<div class="container">
    <div class="sidebarLeft">sidebarLeft</div>
    <div class="main">main</div>
    <div class="sidebarRight">sidebarRight</div>
</div>
<div class="footer">footer</div>
</body>
</html>

main.css:

* {
  margin: 0;
  padding: 0;
}
body {
  font: 18px/20px "Microsoft YaHei", arial, serif;
  color: #fff;
  background: #fff;
}
img {
  border: 0;
}
a {
  text-decoration: none;
}
.header,
.container,
.footer {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  text-align: center;
}
.header {
  height: 100px;
  background: #333;
}
.sidebarLeft,
.main,
.sidebarRight {
  background: #333;
}
.footer {
  height: 100px;
  background: #333;
}
@media screen and (min-width: 960px) {
  .header,
  .container,
  .footer {
    width: 960px;
  }
  .sidebarLeft,
  .main,
  .sidebarRight {
    float: left;
    height: 400px;
  }
  .sidebarLeft,
  .sidebarRight {
    width: 200px;
  }
  .main {
    margin-left: 10px;
    margin-right: 10px;
    width: 540px;
  }
  .container {
    height: 400px;
  }
}
@media screen and (min-width: 600px) and (max-width: 960px) {
  .header,
  .container,
  .footer {
    width: 600px;
  }
  .sidebarLeft,
  .main {
    float: left;
    height: 400px;
  }
  .sidebarRight {
    display: none;
  }
  .sidebarLeft {
    width: 160px;
  }
  .main {
    margin-left: 10px;
    width: 430px;
  }
  .container {
    height: 400px;
  }
}
@media screen and (max-width: 600px) {
  .header,
  .container,
  .footer {
    width: 400px;
  }
  .sidebarLeft,
  .sidebarRight {
    width: 400px;
    height: 100px;
  }
  .main {
    margin-top: 10px;
    width: 400px;
    height: 200px;
  }
  .sidebarRight {
    margin-top: 10px;
  }
  .container {
    height: 420px;
  }
}
/*
//完整版
.header,
.container,
.footer{
    margin-left:auto;
    margin-right:auto;
    width:960px;
    margin-top:10px;
    text-align:center;
}

.header{
    height:100px;
    background:#333;
}

.sidebarLeft,
.main,
.sidebarRight{
    background:#333;
    float:left;
    height:400px;
}

.sidebarLeft,
.sidebarRight{
    width:200px;
}

.main{
    margin-left:10px;
    margin-right:10px;
    width:540px;
}

.container{
    height:400px;
}

.footer{
    height:50px;
    background:#333;
}

*/

转载自：http://blog.csdn.net/rootes/article/details/23761365

http://caibaojian.com/356.html

xlb_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局实例

静态布局意思就是只是针对某个屏幕下设计的网页，当屏幕大小改变时，页面布局不会发生变化，就像经常所看到的滚动条。自适应布局特点是分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。流式布局
复制链接

扫一扫

专栏目录