在移动终端设备起来越多的今天，如果要针对做所有屏幕去适配开发成本太大。通过响应式开发使得一个网站能够兼容多种终端。 通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验，屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。

响应式开发的原理：媒体查询

      媒体查询，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。

实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。

超小屏幕      （移动设备）         w<768px

小屏设备    768px-992px          768 <= w <992

中等屏幕    992px-1200px     992 =< w <1200

宽屏设备    1200px以上      w>=1200

CSS 语法：

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

值   
			
描述
		
device-height  
			
 定义输出设备的屏幕可见高度
		
device-width  
			
  定义输出设备的屏幕可见宽度
		
max-device-height  
			
  定义输出设备的屏幕可见的最大高度
		
max-device-width  
			
定义输出设备的屏幕最大可见宽度
		
min-device-width  
			
定义输出设备的屏幕最小可见宽度
		
min-device-height   
			
定义输出设备的屏幕的最小可见高度
		
max-height 
			
定义输出设备中的页面最大可见区域高度
		
max-width   
			
定义输出设备中的页面最大可见区域宽度
		
min-height
			
定义输出设备中的页面最小可见区域高度
		
min-width 
			
定义输出设备中的页面最小可见区域宽度
		
简单举例：控制不同屏幕尺寸下的屏幕背景色

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

 

  Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。 

  栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

栅格系统的工作原理：

1.行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment 

）和内补（padding）。 

2.通过行（row）在水平方向创建一组列（column）。 

3.自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素。 

4.类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。 

5.通过为列设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消为.container元素设置的padding，也就间接为行（row）所包含的列（column）抵消掉了padding。 

6.栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。 

7.如果一行（row）中包含了的列（column）大于12，多余的列所在的元素将作为一个整体另起一行排列。 

8.栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类。 

如下图所示为栅格系统在多种屏幕上的应用说明。 


使用Bootstrap响应式布局

  首先需要在head中引入meta标签，添加viewpirt属性，content中宽度等于设备宽度， initial-scale:页面首次被显示可见区域的缩放级别，取值1则页面按实际尺寸显示，无任何缩放； 

maximum-scale:允许用户缩放到的最小比例； 

user-scalable:用户是否可以手动缩放。代码如下：



<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

  下面为使用bootstrap布局的页面（登录表单界面），针对的是手机超小屏幕（iphone5s）和PC屏幕（>=1200px)。col-xs-12:小屏幕占12列大小，col-lg-5：大屏幕占5列大小，col-lg-offset-3:大屏幕缩进3列大小。这是一个比较简单的实例，想要适应其他屏幕如平板可添加col-md-* 属性，大屏手机可添加col-sm-*属性。具体的屏幕使用哪个属性，可参考上面图上的针对不同屏幕Bootstrap栅格系统的不同使用。

<div class="container-fluid login">
 <div class="row">
   <div  class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
     <form class="form-horizontal loginForm">
         <h3 class="form-signin-heading">用户登录</h3>
         <div class="form-group">
           <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
           <div class="col-sm-8 col-xs-8">
             <input type="text" class="form-control"  name="email" placeholder="请输入邮箱"> 
             <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
           </div>

         </div>
         <div class="form-group">
           <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
           <div class="col-sm-8 col-xs-8">
             <input type="password" class="form-control" name="password" placeholder="请输入密码">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
           </div>
         </div>
         <div class="form-group">
           <div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
             <div class="checkbox">
               <label>
               <input type="checkbox">记住我
               </label>
             </div>
           </div>
           <div class="col-sm-4 col-xs-4 control-label" >
              <a href="resetPwd.html" id="forget">忘记密码？</a>
           </div>

         </div>
         <div class="form-group">
           <div class="col-sm-12 col-lg-12">
             <button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
           </div>
         </div>
     </form>
     </div>
 </div>

代码效果图： 

PC端： 


手机端： 

Bootstrap的响应式布局原理
什么是响应式布局
所谓响应式布局：为了保证不同分辨率的终端的正常布局——一个网站能够兼容多个终端（不是为每个终端做一个特定的版本）旨在为不同终端的用户提供更加舒适的界面和更好的用户体验
bootstrap的响应式布局-例子
bootstrap针对不同设备的分辨率设置不同的阈值，xs、sm、md、lg

同样的内容对于笔记本这样的设备，以及在小屏幕上会有不一样的效果

比如以下的html：
	<div class="container">
            <div class="row">
                <div class="col-md-3" style="background-color: seagreen;">3</div>
                <div class="col-md-3" style="background-color: sienna;">3</div>
                <div class="col-md-3" style="background-color: slateblue;">3</div>
                <div class="col-md-3" style="background-color: steelblue;">3</div>
            </div>
        </div>

笔记本界面：



iphonex



在bootstrap中，在html中为多种尺寸的屏幕设置样式，在配合bootstrap提供的媒体查询，能够轻松地实现响应式布局
	<div class="container">
            <div class="row">
                <div class="col-md-3 col-xs-6" style="background-color: seagreen;">3</div>
                <div class="col-md-3 col-xs-6" style="background-color: sienna;">3</div>
                <div class="col-md-3 col-xs-6" style="background-color: slateblue;">3</div>
                <div class="col-md-3 col-xs-6" style="background-color: steelblue;">3</div>
            </div>
        </div>

	

微信公众号：AlbertYang
关注我更多精彩等你来发现！
1 什么是响应式布局？
 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念，简而言之，就是一个网站能够兼容多个终端。
开发方式
移动web开发+PC开发
响应式开发
               应用场景
一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端。
针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活。
                  开发
针对性强，开发效率高。
兼容各种终端，效率低，
适配
只适配 移动设备，pad上体验相对较差。
可以适配各种终端
效率
代码简洁，加载快。
代码相对复杂，加载慢。
  响应式开发与移动端与PC端分别开发的区别：响应式开发只编写一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。移动端与PC端分别开发，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务器，返回不同的页面。
2 响应式开发的原理？
响应式开发的原理是使用CSS3中的Media Query(媒体查询)针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。
CSS3 @media 查询定义和使用:
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。
@media screen and (max-width: 300px) {    body {        background-color: red;    }}
设备的划分情况为：
小于768的为超小屏幕(手机)
768~992之间的为小屏设备(平板)
992~1200的中等屏幕(桌面显示器)
大于1200的宽屏设备(大桌面显示器)
但是我们也可以根据实际情况自己定义划分情况。
3 响应式页面开发
3.1 视频
3.2 HTML
<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>响应式页面入门教程：Albert Yangtitle>    <link rel="stylesheet" href="style.css">    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">head><body>    <header>        <a href="#" class="logo">AlbertYanga>        <ul class="navigation">            <li><a href="#">首页a>li>            <li><a href="#">博客a>li>            <li><a href="#">联系我a>li>            <li><a href="#">留言板a>li>            <li><a href="#">关于我a>li>            <li><a href="#">照片墙a>li>        ul>        <div class="search">            <input type="text" placeholder="Search">            <i class="fa fa-search" aria-hidden="true">i>        div>    header>    <div class="banner">        <div class="content">            <h2>响应式布局h2>            <p>                响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。                传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。                响应式设计与自适应设计的区别：响应式开发一套界面，                通过检测视口分辨率，针对不同客户端在客户端做代码处理，                来展现不同的布局和内容；自适应需要开发多套界面，                通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，                从而请求服务层，返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，                当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。            p>            <a href="#">阅读全文a>        div>                <img src="1.jpg" class="image">    div>body>html>
3.3 CSS
/* 清除浏览器默认边距，使边框和内边距的值包含在元素的width和height内 */* {    margin: 0;    padding: 0;    box-sizing: border-box;}header {    position: absolute;    left: 0;    top: 0;    width: 100%;    display: flex;    justify-content: space-between;    align-items: center;    padding: 15px 100px;    z-index: 10;    background: #5b639c;}header .logo {    position: relative;    font-size: 1.5em;    color: #fff;    text-decoration: none;    font-weight: 600;}header .navigation {    display: flex;    justify-content: center;    flex-wrap: wrap;    margin: 10px 0;}header .navigation li {    list-style: none;    margin: 0 20px;}header .navigation li a {    text-decoration: none;    color: #fff;    font-weight: 600;    letter-spacing: 1px;}header .navigation li a:hover{    color: #ffed3b;}header .search {    position: relative;    width: 300px;    height: 40px;}header .search input {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    color: #fff;    background: transparent;    outline: none;    border: 1px solid #fff;    border-radius: 5px;    padding: 0 10px 0 45px;}header .search input::placeholder {    color: #fff;}header .search .fa-search {    position: absolute;    top: 50%;    transform: translateY(-50%);    left: 10px;    color: #fff;    border-right: 1px solid #fff;    padding-right: 10px;}.banner {    background: #eee;    padding: 200px 100px 100px;    min-height: 100vh;    display: flex;    justify-content: space-between;    align-items: center;}.banner .content {    max-width: 1000px;}.banner .content h2 {    font-size: 2.5em;    color: #333;    margin-bottom: 20px;}.banner .content p {    font-size: 1em;    color: #333;}.banner .content a {    display: inline-block;    background: #434978;    color: #fff;    padding: 10px 20px;    text-decoration: none;    font-weight: 600;    margin-top: 20px;}.banner .image {    max-width: 500px;    margin-left: 50px;}/*屏幕宽度小于991px,改变布局和样式*/@media screen and (max-width:991px) {    header {        padding: 10px 20px;        flex-direction: column;    }    .banner {        padding: 150px 20px 50px;        flex-direction: column-reverse;    }    .banner .image {        max-width: 80%;        margin-left: 0;    }    .banner .content h2 {        font-size: 2em;    }}/*屏幕宽度小于600px,改变布局和样式*/@media screen and (max-width:600px) {    header .search {        width: 100%;    }    .banner .image {        margin-top: 30px;    }}
今天的学习就到这里了，如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，在看，点赞！！！