响应式布局学习笔记

1.响应式布局基础

响应式布局介绍
1.响应式布局
    响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为没个终端做一个特定的版本.这个概念是为了解决移动互联网而诞生的.其目的是为用户提供更加舒适的界面和很好的用户体验.
2.优缺点:
    优点:1):面对不同分辨率设备灵活性强
             2):能够快捷解决多设备显示适应问题
    缺点:1):兼容各种设备工作量大,效率低下
             2):代码累赘,会出现隐藏无用的元素,加载事件加长

例:http://www.etao.com

   CSDN登录界面

响应式布局基本实现
1.CSS3的Media Query(媒介查询):
    设备宽高:device-width,device-height  屏幕大小
    渲染窗口的宽和高:width,height        窗口大小
    设备的手持方向:orientation
    设备的分辨率:resolution
2.使用方法:
    外联
    内嵌样式
3.可用JS实现,但只用于不支持CSS的低端浏览器,不推荐

内嵌:

 <style>        @media screen and (min-width: 640px) {/*and后面必须有空格*/            body{                background-color: blue;            }        }    </style>

外联:

    <link rel="stylesheet" type="text/css" href="css.css" media="only screen and (max-width:640px)">

响应式布局实例操作

教程要写这个,测试删除也可以

 <meta name="viewport" content="width = device-width,initial-scale=1"> 

正文:

<div class="heading"></div>    <div class="container">        <div class="left"></div>        <div class="main"></div>        <div class="right"></div>    </div>    <div class="footing"></div>

外联内容:

*{    margin: 0;    padding: 0;}.heading,.container,.footing{    margin: 10px auto;}.heading{    height: 100px;    background-color: chocolate;}.left,.right,.main{    background-color: cornflowerblue;}.footing{    height: 100px;    background-color: aqua;}@media screen and (min-width:960px ) {    .heading,.container,.footing{        width: 960px;    }    .left,.main,.right{        float: left;        height: 500px;    }    .left,.right{        width: 200px;    }    .main{        margin-left: 5px;        margin-right: 5px;        width: 550px;    }    .container{        height: 500px;    }}@media screen and (min-width: 600px) and (max-width: 960px){    .heading,.container,.footing{        width: 600px;    }    .left,.main{        float: left;        height: 400px;    }    .right{        display: none;    }    .left{        width: 160px;    }    .main{        width: 435px;        margin-left: 5px;    }    .container{        height: 400px;    }}@media screen and (max-width: 600px) {    .heading,.container,.footing{        width: 400px;    }    .left,.right{        width: 400px;        height: 100px;    }    .main{        margin-top: 10px;        width: 400px;        height: 200px;    }    .right{        margin-top: 10px;    }    .container{        height: 420px;    }}

2.响应式布局之Bootstrap

了解Bootstrap
1.了解Bootstrap:
    简介,直观,强悍的前端开发框架,让web开发更迅速,简单.
2.优点:
    快速,简单,灵活的善恶系统,小而强大,响应式布局,跨平台等
3.下载
    http://v3.bootcss.com

引入bootstrap.min.css

例子:

<div class="container"><!--居中-->    <div class="row">        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>    </div>    <div class="row">        <div class="col-md-8">.col-md-8</div>        <div class="col-md-4">.col-md-4</div>    </div>    <div class="row">        <div class="col-md-4">.col-md-4</div>        <div class="col-md-4">.col-md-4</div>        <div class="col-md-4">.col-md-4</div>    </div>    <div class="row">        <div class="col-md-6">.col-md-6</div>        <div class="col-md-6">.col-md-6</div>    </div></div>

css:

.row{    margin-bottom: 20px;}.row .row{    margin-top: 10px;    margin-bottom: 0;}[class*="col-"]{/*索引所有内容*/    padding-top: 15px;    padding-bottom: 15px;    background-color: #ffff00;    background-color: red;    border: 1px solid orange;    border: 1px solid rgba(86,61,124,2);}

制作http://v3.bootcss.com/examples/jumbotron/     有响应式布局效果

<!--http://v3.bootcss.com/components/#navbar-default--><nav class="navbar navbar-inverse navbar-fixed-top"><!--navbar-inverse 颜色变深-->    <div class="container">        <!-- Brand and toggle get grouped for better mobile display -->        <div class="navbar-header">            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"                    data-target="#bs-example-navbar-collapse-1">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-brand" href="#">Project name</a>        </div>        <!-- Collect the nav links, forms, and other content for toggling -->        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            <form class="navbar-form navbar-right" role="search">                <div class="form-group">                    <input type="text" class="form-control" placeholder="Email">                </div>                <div class="form-group">                    <input type="text" class="form-control" placeholder="密码">                </div>                <button type="submit" class="btn btn-success">登录</button>            </form>        </div>        <!-- /.navbar-collapse -->    </div>    <!-- /.container-fluid --></nav><!--http://v3.bootcss.com/components/#jumbotron--><div class="jumbotron">    <div class="container">        <h1>Hello, world!</h1>        <p>This is a template for a simple marketing or informational website. It includes a large callout called a            jumbotron and three supporting pieces of content. Use it as a starting point to create something more            unique.</p>        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>    </div></div><!--http://v3.bootcss.com/css/#grid-example-basic--><div class="container">    <div class="row">        <div class="col-md-4">            <h2>Heading</h2>            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis                euismod. Donec sed odio dui.</p>            <p><a class="btn btn-default btn-lg" role="button">View details »</a></p>        </div>        <div class="col-md-4">            <h2>Heading</h2>            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis                euismod. Donec sed odio dui.</p>            <p><a class="btn btn-default btn-lg" role="button">View details »</a></p>        </div>        <div class="col-md-4">            <h2>Heading</h2>            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis                euismod. Donec sed odio dui.</p>            <p><a class="btn btn-default btn-lg" role="button">View details »</a></p>        </div>    </div></div>    <footer>        <p>&copy;2014</p>    </footer>