响应式布局实例

来源：互联网发布：网易我的世界手机版js 编辑：程序博客网时间：2024/05/29 13:11

静态布局

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

自适应布局

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

流式布局

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

响应式布局

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

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

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

0 0