首页 > 代码库 > 响应式文档设计
响应式文档设计
响应式文档设计三种方法:
1、采用float浮动
1 <header>页眉</header> 2 <main> 3 <div class="left">left</div> 4 <div class="middle">middle</div> 5 <div class="right">right</div> 6 </main> 7 <footer>footer</footer>
CSS部分
1 <style type="text/css"> 2 *{margin: 0px;padding: 0px;} 3 body{ color: #ffffff;text-align: center; font-size: 24px;} 4 header{width: 100%; height: 40px; background-color: #7f8c8d;} 5 main{width: 100%;background-color: #ffffff; } 6 .left,.middle,.right{float: left; width: 400px;height: 200px;} 7 .left{background-color: #0b76ac;} 8 .middle{background-color: #0bb59b;} 9 .right{background-color: #8d341f;} 10 main:after{display: block; content: " "; height: 0; zoom: 1; clear: both;} 11 footer{width: 100%; height: 40px; background-color: #000000;} 12 </style>
重点:
- 浏览器背景总宽度100%;
- 块级元素宽度固定,浮动
- 清除浮动,展现行高
2、@media媒体查询
HTML部分
1 <header>页眉</header> 2 <main> 3 <div class="col-2"> 4 <div class="left">left</div> 5 <div class="middle">middle</div> 6 </div> 7 <div class="right">right</div> 8 </main> 9 <footer>footer</footer>
(1)添加文档描述,设置文档不可缩放
1 <meta name="viewport" content="width=device-width,initial-scale=1">
(2)为不同宽度的媒介设置CSS(宽度,字体,图片)
1 <style type="text/css"> 2 *{margin: 0;padding: 0;} 3 body{ color: #ffffff;text-align: center; } 4 header{width: 100%; height: 40px; background-color: #7f8c8d;} 5 main{width: 100%;background-color: #ffffff; } 6 .left,.middle,.right{ height: 100px;width: 33.3%; float: left;} 7 .left{background-color: #0b76ac;} 8 .middle{background-color: #0bb59b;} 9 .right{background-color: #8d341f;} 10 main:after{display: block; content: " "; height: 0; zoom: 1; clear: both;} 11 footer{width: 100%; height: 40px; background-color: #000000;} 12 @media only screen and (max-width:1024px ) { 13 .left,.middle{width: 50%; float: left;} 14 .right{width: 100%;} 15 .col-2:after{display: block;content: "";clear: both;zoom: 1;visibility: hidden;} 16 } 17 @media only screen and (max-width: 700px) { 18 .left,.middle,.right{width: 100%;} 19 } 20 </style>
3、Bootstrap响应式框架
(1)引入Bootstrap框架
1 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 2 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 3 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
(2)HTML部分
1 <div class="container"> 2 <header class="row"> 3 <div class="col-*-12">页眉</div> 4 </header> 5 <main class="row"> 6 <div class="left col-lg-4 col-md-5 col-sm-6 col-xs-12">left</div> 7 <div class="middle col-lg-4 col-md-5 col-sm-6 col-xs-12">middle</div> 8 <div class="right col-lg-4 col-md-2 col-sm-12 col-xs-12">right</div> 9 </main> 10 <footer class="row"> 11 <div class="col-*-12">footer</div> 12 </footer> 13 </div>
(3)CSS部分
1 <style type="text/css"> 2 *{margin: 0;padding: 0;} 3 body{ color: #ffffff;text-align: center; } 4 header{height: 40px; background-color: #7f8c8d;} 5 .left{background-color: #0b76ac;height: 200px;} 6 .middle{background-color: #0bb59b;height: 200px;} 7 .right{background-color: #8d341f;height: 200px;} 8 footer{height: 40px; background-color: #000000;} 9 </style>
响应式文档设计
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。