前言：如果還不會如何在Django中創建APP並進行一系列配置步驟的，請參考上一篇博客：http://blog.csdn.net/qq_40421277/article/details/79322903
關於Django的響應式的方法有兩種：
1. 使用boostrap等已做好的響應式組件（以下就只舉例boostrap）
2. 使用js和jquery來實現響應式
3. 使用css3的媒體查詢
方法一：使用boostrap
- 下載boostrap文件
下載後將他放在你的project下的static目錄下。
- 引用boostrap
在父模板（在MxOnline_Django項目中是base.html）中src和link引入boostrap
3.使用boostrap的組件
比如使用boostrap的響應式導航欄
寬度width>767px以上是這樣的
當寬度在width<=767是這樣的
在MxOnline_Django項目中是這樣引用boostrap響應式導航欄的
<div class="top navbar navbar-inverse navbar-static-top" role="navigation">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="fl">
<p>服務電話：<b>33333333</b></p>
</div>
<div class="navbar-collapse collapse" id="navbar1">
<a style="color:white" class="fr registerbtn" href="{% url 'register' %}">註冊</a>
<a style="color:white" class="fr loginbtn" href="{% url 'login' %}">登錄</a>
</div>
</div>boostrap有許多種組件，取決於你要是用哪種，boostrap的官網也有使用教程
方法二：使用js、jQuery或者css3媒體查詢來實現響應式
- 使用js實現
通過js實現媒體查詢之前我們需要了解MediaQueryList
廢話不多說，直接上代碼！
//css樣式
<style>
nav{
background-color: #f8f8f8;
border-color: #e7e7e7;
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}
h3{
float: left;
margin-left: 20px;
margin-top: 10px;
}
#ul1{
float: left;
margin-bottom: 0;
list-style: none;
}
#ul1 > li {
float: left;
padding: 15px;
}
#ul2{
float: right;
margin-bottom: 0;
list-style: none;
}
#ul2 > li {
float: left;
padding: 15px;
}
button{
float: right;
list-style: none;
width: 40px;
height: 35px;
margin-top: 5px;
border-radius: 5px;
}
button > span{
display: table;
line-height: 0px;
width: 20px;
}
.clean{
clear: both;
}
#ul3{
float: right;
list-style: none;
}
</style>//body代碼
<body>
<nav>
<h3><a>Project name</a></h3>
<ul id="ul1">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul id="ul2">
<li>Default</li>
<li>Static Top</li>
<li>Fixed Top</li>
</ul>
<button id="button">
<span>-</span>
<span>-</span>
<span>-</span>
</button>
<div class="clean"></div>
<ul id="ul3">
<li>Default</li>
<li>Static Top</li>
<li>Fixed Top</li>
</ul>
</nav>
</body>//JS樣式
<script>
var mql = window.matchMedia('(min-width: 767px)');
screenTest(mql); //爲了實現剛打開該頁面或刷新後的媒體查詢判斷（可以刪除這段代碼後，再把窗口縮小後刷新看看效果）
var ul3 = document.getElementById('ul3');
function screenTest(e) {
if (e.matches) {
//如果瀏覽器窗口大於767px，實現下列代碼
document.getElementById('ul1').style.display='block';
document.getElementsByTagName('button')[0].style.display='none';
document.getElementById('ul2').style.display='block';
document.getElementById('ul3').style.display='none';
} else {
//如果瀏覽器窗口小於等於767px，實現下列代碼
document.getElementById('ul1').style.display='none';
document.getElementsByTagName('button')[0].style.display='block';
document.getElementById('ul2').style.display='none';
}
}
mql.addListener(screenTest); //監聽窗口的變化
var button = document.getElementById('button');
button.addEventListener('click',()=>{
if( ul3.style.display=='block'){
ul3.style.display='none';
}else{
ul3.style.display='block';
}
})
</script>上面實現的結果和boostrap組件的響應是一樣的，當clientWidth>767px時，
當clientWidth<=767px時,
2.使用jQuery實現
首先需要引入jQuery庫，
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
css樣式與body代碼不變，js代碼使用jQuery，如下
<script>
$(document).ready(function(){
var mql = window.matchMedia('(min-width: 767px)');
screenTest(mql);
function screenTest(e) {
if (e.matches) {
//如果瀏覽器窗口大於767px，實現下列代碼
$('#ul1').css("display","block");
$('#button').css("display","none");
$('#ul2').css("display","block");
$('#ul3').css("display","none");
} else {
//如果瀏覽器窗口小於等於767px，實現下列代碼
$('#ul1').css("display","none");
$('#button').css("display","block");
$('#ul2').css("display","none");
}
}
mql.addListener(screenTest); //監聽窗口的變化
$('#button').click(()=>{
if( ul3.style.display=='block'){
ul3.style.display='none';
}else{
ul3.style.display='block';
}
})
};
</script>3.使用css3的媒體查詢
js代碼中只留下button的點擊事件，其他的全刪除
var button = document.getElementById('button');
button.addEventListener('click',()=>{
if( ul3.style.display=='block'){
ul3.style.display='none';
}else{
ul3.style.display='block';
}
})css代碼中添加以下的代碼
......
@media all and (min-width:767px){
//大於767px實現下列css樣式
#ul1{
display:block;
}
#ul2{
display:block;
}
#button{
display:none;
}
#ul3{
display:none;
}
}
@media all and (max-width:767px){
//小於767px實現下列css樣式
#ul1{
display:none;
}
#ul2{
display:none;
}
#button{
display:block;
}
#ul3{
display:none;
}
}Django的響應式說白了就是js代碼和css代碼的編寫，與是否應用django無關。