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


手机端： 

1.1 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

1.2 响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分
2.0 bootstrap的介绍
2.1Bootstrap简介
Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
中文网  官网  推荐网站
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
2.2 bootstrap优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

2.3bootstrap基本使用
Bootstrap 使用四步曲：


创建文件夹结构


创建 html 骨架结构
















    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>



引入相关样式文件






书写内容

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果


2.4 bootstrap布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。
.container

响应式布局的容器  固定宽度
大屏 ( >=1200px)  宽度定为 1170px
中屏 ( >=992px)   宽度定为  970px
小屏 ( >=768px)   宽度定为  750px
超小屏  (100%)

.container-fluid

流式布局容器 百分百宽度
占据全部视口（viewport）的容器。

2.6 bootstrap栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

按照不同屏幕划分为1~12 等份
行（row） 可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小；  md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数  例如 class=“col-md-4 col-sm-6”

栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*
元素内。
<!-- 列嵌套 -->
 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
 <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左侧</div>
      <div class="col-lg-8 col-lg-pull-4">右侧</div>
  </div>

响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

	

哈喽，大家好呀，我是滑稽君。响应式布局是什么？其实就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。简单来说，我们希望网站在移动设备和PC上都能有一个好的呈现效果。当检测到设备不同时，我们可以给出不同的浏览、布局方案。
我们可以通过Bootstrap来实现，那么它又是什么呢？Bootstrap基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
视频讲解：
效果：
如视频演示，在大屏时我们的网页内容会自动放大填充，小屏时会舍弃右侧的博客分类来凸显主体。为了避免导航栏遮挡网页，在小屏时，副导航栏还会自动折叠，并且永远保持在正上方，方便你随时切换不同的页面。在面对不同的浏览情况时，我们的网站都给出了较好的浏览方案。
除此之外我们还对排版做了进一步的优化，替换文字标签、使文章内容居中显示，为内容增加边框。涉及到布局肯定需要一个方法来规定坐标。这样我们才可以在指定的位置放置我们想要的内容。bootstrap采用栅格来划分网页。
它把网页分成12份，你可以决定每个部分各自占多少栏，如上图你可以任意分配，但你要保证它们加起来为12。比如在blog_detail页面，我们规定博客主体占10份，左右各余1，即添加1个偏置量。其中md代表中等屏幕。它对屏幕大小的定义如下。md就是中等屏幕的类前缀。
部分代码：
list页面
{% extends 'base.html' %}{% block title %}我的网站{% endblock %}{% block nav_blog_active %}active{% endblock %}{% load staticfiles %}{% block header_extends %}    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">{% endblock %}{# 页面内容 #}{% block content %}    <div class="container-fluid">        <div class="row">            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">                <div class="panel panel-default">                    <div class="panel-heading">                        {% block block_list_title %}                        博客列表(一共有{{ blogs|length }}篇博客)                        {% endblock %}                    div>                    <div class="panel-body">                        {% for blog in blogs %}                            <div class="blog">                                <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}a>h3>                                <p class="blog-info">                                    <span class="glyphicon glyphicon-tag">span> <a href="{% url 'blogs_with_type' blog.blog_type.pk %}">                                    {{ blog.blog_type }}a>                                    <span class="glyphicon glyphicon-time">span>{{ blog.created_time|date:"Y-m-d" }}                                p>                                <p>{{ blog.content|truncatechars:120 }}p>                            div>                        {% empty %}                            <div class="blog">                                <h3>暂无博客，敬请期待h3>                            div>                        {% endfor %}                    div>                div>            div>            <div class="hidden-xs col-sm-4 col-md-3 col-lg-2">                <div class="panel panel-default">                    <div class="panel-heading">博客分类div>                    <div class="panel-body">                        <ul class="blog-types">                            {% for blog_type in blog_types %}                                <li><a href="{% url 'blogs_with_type' blog_type.pk %}">                                {{ blog_type.type_name }}a>li>                            {% empty %}                                <li>暂无分类li>                            {% endfor %}                        ul>                    div>                div>            div>        div>    div>{% endblock %}
blog.css
ul.blog-types {    list-style-type: none;}div.blog:not(:last-child) {    margin-bottom: 2em;    padding-bottom: 1em;    border-bottom: 1px solid #eee;}div.blog h3 {    margin-top: 0.5em;}div.blog p.blog-info {    margin-bottom: 0;}ul.blog-info-description {    list-style-type: none;    margin-bottom: 2em;}ul.blog-info-description li {    display: inline-block;    margin-right: 2em;}div.blog-content {    text-indent: 2em;}--line4 只要不是最后一个元素就赋予格式
base.html
{% load staticfiles %}<html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>{% block title %}{% endblock %}title>    <link rel="stylesheet" href="{% static 'base.css' %}">    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}">    <script type="text/javascript" src="{% static 'jquery-1.12.4.min.js' %}">script>    <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}">script>    {% block header_extends %}{% endblock %}head><body>    <div class="navbar navbar-default navbar-fixed-top"  role="navigation">        <div class="container-fluid">            <div class="navbar-header">                <a class="navbar-brand" href="{% url 'home' %}">个人博客网站                a>                <button  class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#navbar-collapse" >                    <span class="icon-bar">span>                    <span class="icon-bar">span>                    <span class="icon-bar">span>                button>            div>            <div id="navbar-collapse" class="collapse navbar-collapse" >                <ul class="nav navbar-nav">                    <li class="{% block nav_home_active %}{% endblock %}">                        <a href="{% url 'home' %}">首页a>                    li>                    <li class="{% block nav_blog_active %}{% endblock %}">                        <a href="{% url 'blog_list' %}">博客a>                    li>                ul>            div>        div>    div>    {% block content %}{% endblock %}body>html>
仅展示部分源码，更细节的内容我们放在视频中为大家演示，全部源码放百度云啦~
https://pan.baidu.com/s/1tUJ3x9l_Dq1EvmTtMT4GOQ公众号内发送django获取提取码。https://space.bilibili.com/252028233
❂ 滑稽研究所
 咳咳，记得看视频，看视频，看视频。