談到響應式，大家不自覺的會想到什麼？

首先映入眼簾的便是隨著網頁寬度變化而網頁內容呈現出不同內容的效果！那麼由來是什麼呢？

• 2009時間段，網際網路發生了一件天大的事情！
• 那就是在北京時間2009年6月9日凌晨2：48分，在美國舊金山MosconeWest會議中心舉行的WWDC2009（蘋果全球開發者大會）上，蘋果公司釋出了iPhone第三代產品iPhone 3GS。
• 而在此之前，手機端的網頁瀏覽是非常簡陋的，直到iPhone3GS出現，喬布斯在iPhone的ios4系統中新定義了螢幕手勢的縮放、拖動、旋轉等，並且使排版更加豐富。從此，iPhone顯得不一樣。移動端網頁顯示也同樣變得不一樣。在此之前，舊的標準已經不適用如此豐富的互動操作，迫於技術革新，w3c緊急推出了html5草案，歐洲計算機協會ECMA同時間段也推出了Es5（EcmaScript）標準以及Es6至以後的標準制定方案！直到2014年下半年左右，HTML5才最終形成標準體系，並基本完善完成！
• 因此，喬布斯正真的擁有了改變世界、改變了網際網路的說法！他的成果，也成功了改變了前端開發者的格局，也推動了前端響應式、移動式開發，以及標準化的發展！
  喬布斯和iPhone3GS

從1991開始 HTML 就是用標記表示一些比普通文字更豐富的文字,文字的超集,有多個版本,沒有圖片傳遞,標準混亂.
1. 1994 HTML2 第一個正式規範.Netspace 和ie推出 w3c成立
2. 1995 HTML3 提供了很多新特性,例如文字環繞,表格.BrendanEich用了十天開發JavaScript,瀏覽器大戰開始.
3. 1996 CSS+Javascript 用層疊樣式表修改樣式
4. 1997 HTML4 把一些標籤標記為廢棄，網際網路公司的博弈結束，網景公司被收購;ES1出現;
5. 1998 CSS2 Web技術停滯 ES2 1999 ES3 Mozilla成立
6. 2000 環境混亂,提出XHTML，更嚴格的HTML，去除大寫的標籤，不閉合的標籤等 是XML的實現 (2001 ie6 winxp)
7. 2002 Tableless Web Design 表格佈局
8. 2003 Mozilla基金會成立,推出火狐,第二次瀏覽器大戰
9. 2005 AJAX 中國到2006年還沒有使用ajax的技術
10. 2009 HTML5 移動端的推動 ES5
11. 2014 HTML5 Finalized ES6
12. 2016年1月13日（美國時間12日），微軟停止為IE8/9/10這些舊版本的IE瀏覽器提供技術支援。
13. 也是在2010年Ethan Marcotte第一次提出了“自適應網頁”這個詞，

響應式的基本要求

1. 大家可以先看一看我製作的一些例子，更改網頁寬度大小看一看效果：

• 聖盃佈局的三種自適應方法（下面的連結包含了我的效果截圖，點選藍色標題檢視各個demo）：

  大家可以看出來三種方法的區別了吧！

如何實現螢幕自適應？

首先，是css的引用和區別

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
 
 media="screen" href="css/common.css" />
<link rel="stylesheet" media="screen and (min-device-width:990px)" href="css/media_pc.css " />
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:989px)" href="css/media_pad.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="css/media_phone.css " />

• 我們來解讀一下

• 第一個標籤name屬性值為viewport的meta標籤！

  viewport是網頁預設的寬度和高度，上面這行程式碼的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。因為不同螢幕比如手機，平板和電腦，至少他們在視覺寬度上是不一樣的！啊，那有的人說：“我的手機螢幕和平板一樣寬，甚至更寬！”，這種人，不解釋，先拖出去打一頓~~~

  首先，先不說視覺寬度，看起來不一樣，就是視覺寬度一樣的螢幕也有很大不同！我們電腦上有個單位叫畫素(px)，手機上也有個單位叫”畫素“，但這是兩個完全不同的概念。有的人有錢，買個5.2寸的手機，畫素尺寸1960x1080，有的人更有錢，買個5.2寸的手機3920x2160，這就是差距。手機上的”畫素“往往是畫素與畫素密度或者說子畫素的結合，而pc端的畫素指的是固定寬高的畫素矩陣，叫做”原始畫素“。我們將在後面做詳細介紹。

• 然後是後面的link標籤！

  看到後面的css引用了嗎？

 media="screen and (min-device-width:990px)" href="css/media_pc.css 

    media="screen and (min-width:768px) and (max-width:989px)"  href="css/media_pad.css" 

    media="screen and (max-width:768px)"  href="css/media_phone.css "

想必這是很明顯了吧！通俗來講，沒錯，這就是螢幕尺寸的區間限定，在螢幕原始畫素寬度屬於某一個寬度時，就會引用對應的css樣式。這種引用方式只是三種中的一種，另外比較常見的還有以下兩種：

<style>
        @import  url("css/media_phone.css") screen and (max-device-width: 400px);
</style>

第二種的缺點就是必須寫在style標籤的最前面，不然瀏覽器它不認你！

@media  screen and (max-device-width: 400px) { 在這裡面寫手機端css}

第三種最怕的就是混亂，如果一個css檔案要放多套螢幕適配樣式的話，花括號就容易出問題！所以我一般都是用的link:css的第一種！但是為什麼pc端的css要用device寫在限定範圍裡呢？你可以簡單的理解為是以pc端的第一個介面作為css的初始樣式，所以以此界定！

想必大家還看到了一個common.css檔案，這是一個用來存放公共樣式的css文件，因為很多響應式的佈局裡，針對各個使用者端的css樣式畢竟有限，一個可以存放公共樣式的文件不但可以大大減少程式碼量、還能減少程式碼的複雜度和大小！可謂一舉多得！這也是程式碼優化的必經之路！

其次是摒棄固執的固定寬度和固定尺寸(這裡指原始畫素單位)

• 相對長度

- 原始畫素：
因為多數計算機顯示器的解析度可以通過計算機的作業系統來調節，顯示器的畫素解析度可能不是一個絕對的衡量標準。現代液晶顯示器按設計有一個原始解析度，它代表畫素和三元素組之間的完美匹配。（陰極射線管也是用紅－綠－藍熒光三元素組，但是它們和影象畫素並不重合，因此和畫素無法比較）。對於該顯示器，原始解析度能夠產生最精細的影象。但是因為使用者可以調整解析度，顯示器必須能夠顯示其它解析度。非原始解析度必須通過在液晶螢幕上擬合重新取樣來實現，要使用插值演算法。這經常會使螢幕看起來破碎或模糊。

• 子畫素：

  很多800w畫素16gb記憶體800w畫素16gb記憶體顯示器和影象獲取系統出於不同原因無法顯示或感知同一點的不同色彩通道。這個問題通常通過多個子畫素的辦法解決，每個子畫素處理一個色彩通道。例如，LCD顯示器通常將每個畫素水平分解為3個子畫素。多數LED顯示器將每個畫素分解為4個子畫素；一個紅，二個綠，和一個藍。多數數碼相機感測器也採用子畫素，通過有色濾波器實現。（CRT顯示器也採用紅綠藍熒光點，但是它們和影象畫素並不對齊，因此不能稱為子畫素）。對於有子畫素的系統，有兩種不同的處理方式：子畫素可以被忽略，將畫素作為最小可以存取的影象元素，或者子畫素被包含到繪製計算中，這需要更多的分析和處理時間，但是可以在某些情況下提供更出色的影象。 後一種方式被用於提高彩色顯示器的外觀解析度。

• PC端 —— 1個裝置獨立畫素 = 1個裝置畫素 （在100%，未縮放的情況下，如果縮放到200%可以說1個裝置獨立畫素 = 2個裝置畫素）

• 移動端 —— 根據裝置不同有很大的差異，根據 ppi 不同我們可以得到不同的換算關係，標準螢幕（160ppi）下 1個裝置獨立畫素 = 1個裝置畫素

• 畫素計算公式：

就像這樣的裝置：

• 以尺寸為4.7英寸、解析度為1334*750的iphone6為例：
  

技巧辦法

這下有清晰的認識了吧！為了要做到螢幕尺寸變化、網頁被拉動、網頁寬度在變化時最好是使用一下辦法：
- 使用最大寬度

style="max-with:1000px;"

當螢幕尺寸大於1000px時，正常顯示，當螢幕尺寸小於1000px時自動縮放，這裡就要考慮到元素內容的變化了！

style="width:60%;"

使用百分比寬高等，讓盒子變得靈動起來。

style="margin-left:calc(50% - 100px);"

使用百分比搭配的計算公式，calc()是自帶的函式。用百分比搭配元素或盒子寬高等代替某些固定的距離，讓瀏覽器自動調節元素位置。

display:flex|inline-flex;

應用彈性盒模型，讓盒子自己動起來！我的demo演示和三種自適應佈局中，中間的tab和後面的彈性盒子實現，每一組盒子都是用到了彈性和模型佈局，demo和比較效果圖裡都明顯地展示了網頁拉動、不同螢幕情況下內容和盒子的關係！在下面，我再次附上鍊接：
- ife的模仿頁面編碼二：

• 聖盃佈局的三種自適應方法（下面的連結包含了我的效果截圖，點選藍色標題檢視各個demo）：

彈性盒模型

• 採用Flex佈局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱”專案”
  
  容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

• 彈性盒子和標準盒子擁有一樣的寬高邊框和邊距屬性，不同的地方是：

  當盒子設定pdisplay：flex或者inline-flex的時候，它的==子級==元素。

• 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。而顯示方向則通過direction:right-to-left或direction:left-to-right屬性來控制。
• 彈性盒模型的最大的優點是配合百分比的寬度、max-width的最大寬度等，使元素本身和子級能同時在瀏覽器寬度變化、顯示螢幕寬度變化的情況下，自動的更改寬度以適應改變後的寬度，這也是響應式和移動H5的基礎。
• 上面的幾個教程已經講的非常全面，容納萬千，非常值得大家一看！！！我就不再這裡獻醜了！