淺談響應式開發與自適應佈局！

 

談到響應式，你們不自覺的會想到什麼？
首先映入眼簾的即是隨着網頁寬度變化而網頁內容呈現出不一樣內容的效果！那麼由來是什麼呢？

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第一次提出了「自適應網頁」這個詞，他的第一個自適應網頁此時誕生，因爲多端的自動適配，響應式開發迎來新的局面！

響應式的基本要求
你們能夠先看一看我製做的一些例子，更改網頁寬度大小看一看效果：
一個簡單自適應佈局demo，你們能夠更改網頁寬度或者用手機瀏覽嘗試

聖盃佈局的三種自適應方法（下面的連接包含了個人效果截圖，點擊藍色標題查看各個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 " />
1
2
3
4
5
咱們來解讀一下
第一個標籤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
1
media="screen and (min-width:768px) and (max-width:989px)" href="css/media_pad.css"
1
media="screen and (max-width:768px)" href="css/media_phone.css "
1
想必這是很明顯了吧！通俗來說，沒錯，這就是屏幕尺寸的區間限定，在屏幕原始像素寬度屬於某一個寬度時，就會引用對應的css樣式。這種引用方式只是三種中的一種，另外比較常見的還有如下兩種：

<style>
@import url("css/media_phone.css") screen and (max-device-width: 400px);
</style>
1
2
3
第二種的缺點就是必須寫在style標籤的最前面，否則瀏覽器它不認你！

@media screen and (max-device-width: 400px) { 在這裏面寫手機端css}
1
第三種最怕的就是混亂，若是一個css文件要放多套屏幕適配樣式的話，花括號就容易出問題！因此我通常都是用的link:css的第一種！可是爲何pc端的css要用device寫在限定範圍裏呢？你能夠簡單的理解爲是以pc端的第一個界面做爲css的初始樣式，因此以此界定！

想必你們還看到了一個common.css文件，這是一個用來存放公共樣式的css文檔，由於不少響應式的佈局裏，針對各個用戶端的css樣式畢竟有限，一個能夠存放公共樣式的文檔不但能夠大大減小代碼量、還能減小代碼的複雜度和大小！可謂一舉多得！這也是代碼優化的必經之路！

其次是摒棄執拗的固定寬度和固定尺寸(這裏指原始像素單位)
相對長度
單位標識符 說明
em 與元素字號掛鉤
ex 與元素字體的」x高度」掛鉤
rem 與根元素的字號掛鉤
px css像素(假定顯示設備的分辨率爲96dpi)
% 另外一屬性的值百分比
- 原始像素：
由於多數計算機顯示器的解析度能夠經過計算機的操做系統來調節，顯示器的像素解析度可能不是一個絕對的衡量標準。現代液晶顯示器按設計有一個原始解析度，它表明像素和三元素組之間的完美匹配。（陰極射線管也是用紅－綠－藍熒光三元素組，可是它們和圖像像素並不重合，所以和像素沒法比較）。對於該顯示器，原始解析度可以產生最精細的圖像。可是由於用戶能夠調整解析度，顯示器必須可以顯示其它解析度。非原始解析度必須經過在液晶屏幕上擬合從新採樣來實現，要使用插值算法。這常常會使屏幕看起來破碎或模糊。

子像素：

不少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;"
1
當屏幕尺寸大於1000px時，正常顯示，當屏幕尺寸小於1000px時自動縮放，這裏就要考慮到元素內容的變化了！

style="width:60%;"
1
使用百分比寬高等，讓盒子變得靈動起來。

style="margin-left:calc(50% - 100px);"
1
使用百分比搭配的計算公式，calc()是自帶的函數。用百分比搭配元素或盒子寬高等代替某些固定的距離，讓瀏覽器自動調節元素位置。

display:flex|inline-flex;
1
應用彈性盒模型，讓盒子本身動起來！個人demo演示和三種自適應佈局中，中間的tab和後面的彈性盒子實現，每一組盒子都是用到了彈性和模型佈局，demo和比較效果圖裏都明顯地展現了網頁拉動、不一樣屏幕狀況下內容和盒子的關係！在下面，我再次附上連接：
- ife的模仿頁面編碼二：

一個簡單自適應佈局demo，你們能夠更改網頁寬度或者用手機瀏覽嘗試

聖盃佈局的三種自適應方法（下面的連接包含了個人效果截圖，點擊藍色標題查看各個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的基礎。彈性盒模型的詳細教程參考： 菜鳥教程MR_LP的博客盧慧建的博客：Flexible boxes更加優雅的Web佈局菜鳥教程彈性和模型佈局詳解上面的幾個教程已經講的很是全面，容納萬千，很是值得你們一看！！！我就再也不這裏獻醜了！--------------------- 做者：會飛的小鹿 來源：CSDN 原文：https://blog.csdn.net/qq_32842925/article/details/80173871 版權聲明：本文爲博主原創文章，轉載請附上博文連接！