移動端響應式
一、css3的@media媒體查詢
1、定義和使用
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要開發響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對調試來說是一個極大的便利。
語法：
@media mediaType and|not|only (media feature) { /*CSS-Code;*/ }
參數解釋：
mediaType（媒體類型）：類型有很多，常用screen，用於電腦屏幕，平板電腦，智能手機等；
media feature：常用如下兩種值：
max-width：定義輸出設備中的頁面最大可見區域寬度；
min-width：定義輸出設備中的頁面最小可見區域寬度；
2、開始編寫響應式頁面
a、準備工作一：設置Meta標簽
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
參數解釋：
width=device-width：寬度等於當前設備的寬度；
initial-scale=1.0：初始的縮放比例（默認設置為1.0）
user-scalable=no：用戶是否可以手動縮放（設置為no，我們不希望用戶放大縮小頁面）；
b、準備工作二：加載兼容文件JS，因為IE8不支持HTML5和CSS3 的@media，所以需要加載兩個JS文件，來保證我們的代碼實現兼容效果
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
c、準備工作三：設置IE渲染方式默認為最高(可選)，現在有很多人的IE瀏覽器都升級到IE9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8，為了防止這種情況，我們需要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
PS：這段代碼後面加了一個chrome=1，如果用戶的電腦裏安裝了chrome，就可以讓電腦裏面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，如果沒有安裝，就顯示IE最新的渲染模式。
d、代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<title>響應式頁面</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
@media screen and (min-width: 1200px){
body{
background-color: red; // 屏幕寬度大於等於1200px時生效
}
}
// 屏幕寬度大於等於800px，小於等於1200px時生效
@media screen and (min-width: 800px) and (max-width: 1200px){
body{
background-color: green;
}
}
@media screen and (max-width: 800px) {
body{
background-color: yellow; // 屏幕寬度小於等於800px時生效
}
}
</style>
</head>
<body>
</body>
</html>
二、移動端單位介紹
CSS中，W3C文檔把尺寸單位劃為為兩類：相對長度單位和絕對長度單位。
相對長度單位按照不同的參考元素，又可以分為字體相對單位和視窗相對單位：
字體相對單位有：em、ex、ch、rem；
視窗相對單位則包含：vw、vh、vmin、vmax幾種；
絕對單位則是固定尺寸，它們采用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，我們使用最廣泛的則是px、百分比（%）、em以及rem來度量頁面元素的尺寸。
px：絕對（固定）單位；
缺點：任何情況下都是固定值，會導致布局在不同尺寸下的設備錯位；
%：相對單位（會有影響發生變化）相對於父級（自身）大小進行定位；
缺點：能確定範圍的還是比較好計算的，對於不太好確定值得地方不好使用百分比，並且會導致變形，高度一般不好控制；
em：相對單位 （會有影響發生變化） em=當前字體大小；
缺點：會根據當前容器字體大小發生變化，假如每個容器字體大小不一致，那麽計算會非常麻煩；
rem：(r = root)相對單位，只依賴html字體大小；
優點：響應式布局中應用；
示例：動態的修改根元素font-size的js代碼：
/* 自執行函數 * 獲得頁面寬度後動態修改html上的fontsize * 320為iphone5設計稿下的頁面寬度，如下設置後的頁面在iphone5等寬屏幕上 * html的font-size會變為100px，即 1rem = 100px 1px=0.01rem * 所以設置元素尺寸的時候，如果測量設計稿 15px 則需設置尺寸為 (0.01*15)rem = 0.15rem */ !(function(doc, win) { var docEle = doc.documentElement; evt = "onorientationchange" in window ? "orientationchange" : "resize"; fn = function() { var width = docEle.clientWidth; console.log(width) width && (docEle.style.fontSize = 100 * (width / 320) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window));
移動端響應式