;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<p class="title">響應式布局之側欄菜單</p>
<button class="collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-large">
<ul>
<li><a href="">菜單1</a></li>
<li><a href="">菜單2</a></li>
<li><a href="">菜單3</a></li>
<li><a href="">菜單4</a></li>
</ul>
</div>
<div class="nav-small">
<ul>
<li><a href="">菜單1</a></li>
<li><a href="">菜單2</a></li>
<li><a href="">菜單3</a></li>
<li><a href="">菜單4</a></li>
</ul>
</div>
<div class="content">
<p>
據了解，2015年以來，我國已多次公開強調落實帶薪休假。2015年3月5日，國務院總理李克強在政府工作報告中指出，
“要深化服務業改革開放，落實財稅、土地、價格等支持政策以及帶薪休假等制度。”2015年4月初，中共中央、國務院
發布了《關于構建和諧勞動關系的意見》，明確提出“切實保障職工休息休假的權利，完善并落實國家關于職工工作時間、
全國年節及紀念日假期、帶薪年休假等規定”。同年4月24日，人力資源和社會保障部新聞發言人李忠在2015年一季度新聞
發布會上表示，帶薪年休假制度施行7年多以來，仍有部分用人單位和有雇工的個體工商戶沒有認真執行帶薪年休假的法律規定，
職工休息休假權益有待進一步落實。下一步要抓好這項工作的落實。
</p>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html></pre>
上段html頁面中包含的主要關鍵點：
-
一個典型的針對移動端優化的站點包含:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width屬性控制視口的寬度。可以像width=600這樣設為確切的像素數，或者設為device-width這一特殊值來指代比例為100%時屏幕寬度的CSS像素數值。（相應有height及device-height屬性，可能對包含基于視口高度調整大小及位置的元素的頁面有用。）initial-scale屬性控制頁面最初加載時的縮放等級,一般初始化為1.
2.一個只在移動瀏覽器下顯示的按鈕
<button class="collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
3.一個在pc大分辨率下面展示的導航
<div class="nav-large">
<ul>
<li><a href="">菜單1</a></li>
<li><a href="">菜單2</a></li>
<li><a href="">菜單3</a></li>
<li><a href="">菜單4</a></li>
</ul>
</div>
4.一個在移動分辨率下展示的導航
<div class="nav-small">
<ul>
<li><a href="">菜單1</a></li>
<li><a href="">菜單2</a></li>
<li><a href="">菜單3</a></li>
<li><a href="">菜單4</a></li>
</ul>
</div>
大家可能會問，為什么需要兩段導航代碼呢，不是可以寫一段pc和移動公用么，一開始我也是這樣寫的，但是發現pc端縮窄瀏覽器的時候，分辨率相當于移動端，然后用按鈕控制了導航隱藏之后，再擴張瀏覽器， 導航還是隱藏的。只要不去拉縮網頁就沒問題，但是為了體驗的完美，犧牲下代碼共用性吧，寫了兩段導航html.
css代碼
body {
margin: 0;
}
p {
margin: 0;
}
.title {
display: inline-block;
}
.nav-large {
width: 200px;
float: left;
}
.nav-small {
width: 100px;
position: absolute;
background-color: white;
display: none;
}
@media screen and (min-width:768px) {
.header {
height: 60px;
background-color: #FF7F50;
}
.nav-large {
display: block;
}
.nav-small {
display: none;
}
.collapsed {
display: none;
}
}
@media screen and (max-width: 767px) {
.header {
text-align: center;
height: 40px;
background-color: #FF7F50;
}
.nav-large {
display: none;
}
.collapsed {
width: 40px;
height: 40px;
float: left;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
cursor: pointer;
outline:none;
}
.collapsed:active {
border: 1px solid transparent;
}
.collapsed .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #563d7c;
}
.collapsed .icon-bar + .icon-bar {
margin-top: 4px;
}
}</pre>
css代碼還是比較容易理解的，主要靠@media screen來控制響應式布局，使用的方式可以自行google或baidu, 一般來講只要對768px進行一個區分，大于768為pc或pad模式， 小于768為移動端模式。 當然你還可以區分的更細，一般768px的區分已經可以滿足大部分的需求
javascript代碼
document.getElementsByClassName("collapsed")[0].onclick = function () {
var nav = document.getElementsByClassName("nav-small")[0];
if (nav.style.display == "block") {
nav.style.display = "none";
} else {
nav.style.display = "block";
}
}
javascript代碼主要是用于控制 在移動環境下顯示的 導航按鈕了，觸發導航顯示或者隱藏，還是能很簡單的理解的
小結
考慮到移動端的瀏覽速度，框架的選型尤其重要，有些框架雖然功能強大，但是隨之尺寸也是蹭蹭蹭的往上漲。 所以在一些對速度要求比較高的項目中，或者是一個簡單的小型項目中，用原生語法的或者選擇一些很輕量級的框架會有非常明顯的效果提升。
</div>