JB的測試之旅-網站的響應式與自適應

前言

最近項目忙，忙成狗了，一直加班加班加班，人都要廢了~

記得前段時間寫了個seo網站的概念，由於以前一直被這玩意坑，並且坑怕了~
這不，最近領導說，這個網站是自適應的，不是響應式的，要改！（當初立項的時候怎麼就不提這個。。）

當時懵逼了，什麼叫響應式？（請原諒前端小白的我）
自適應能理解，簡單描述，讓同一張網頁自動適應不一樣大小的屏幕，根據屏幕寬度，自動調整佈局~
可是響應式又是什麼鬼？

一張圖

看了好久，感受一張圖能看懂區別：

基礎概念

維基百科：

百度百科：

從維基百科看，響應式跟自適應是同樣的，沒有單獨區分，都是RWD；
可是在百度百科這裏，響應式是RWD，自適應是AWD，可是沒看出二者有什麼區別；

儘管如何，可是結合維基百科跟百度百科，對於響應式的定義基本能認爲：

響應式網頁設計就是一個網站可以兼容多個終端
複製代碼

而關於自適應的定義是：

自適應佈局只專一實現移動端的佈局，旨在實現全部移動端設備的實現效果徹底同樣
複製代碼

由這兩個概念，能夠得出一個狀況：

自適應效果是響應式效果的一個子集
複製代碼

事實上，的確如此;
自適應設計主要是要設定針對不一樣分辨率的寬度，用@media來查詢屏幕寬度，但這不就等於說響應式就不能設定固定寬度，響應式就是靠一個css在任何屏幕分辨率下均可以保持一樣的界面；

RWD&AWD：

• responsive web design：相同一套html/css應用在不一樣終端，使大小屏幕都能有較好體驗

• • fluid grid 百分比寬度佈局
• • media query css響應窗口寬度等條件實現不一樣樣式

• adaptive web design：經過服務端腳本實現不一樣終端輸出不一樣的html/css/js，在保持大屏體驗完美的基礎上進一步提高移動端的加載速度/體驗流暢等性能。

響應式設計與自適應佈局的含義

一、 響應式設計簡單來講是一個網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本;

二、自適應佈局指能使網頁自適應顯示在不一樣大小終端設備上新網頁設計方式及技術。
能夠理解爲不一樣大小的設備上呈現一樣的頁面，讓同一個頁面適應不一樣大小屏幕，根據屏幕的大小，自動調整佈局。

響應式設計：

二者之間的優點&弊端

一、響應式網頁設計優點：流體網格的網站適合響應式網頁設計。
   1）靈活性強，能夠適應不一樣分辨率的設備
   2）方便快捷的解決多設備顯示適應問題    3）省去了不少的控件，同時也省去了很多創建和維護的功夫

二、自適應網頁設計優點：固定斷點的網站適合自適應網頁設計。
   1）實施起來代價更低，測試更容易
   2）自適應佈局可讓設計更加可控，由於它只須要考慮幾種狀態就能夠了

三、自適應網站和響應式網站各自的弊端
自適應網站的手機站有時沒法作到與PC站內容徹底一致，且工做量大，自適應手機站每每使用不一樣的子域名或目錄跳轉，對於優化來說權重分散，訪客瀏覽體驗仍有缺陷。
響應式網設計每每風格有些侷限，對於複雜的框架結構難以實現，製做流程複雜，代碼兼容性要求較高。

開發難度比較

自適應網站開發起來比較既複雜（不一樣屏幕的適配控制）又簡單（獨立於PC端），可是容易維護與調試（只有移動端的處理事件）。

響應式網站開發起來比較既簡單（只需經過媒體查詢來調整）又複雜（與PC端網頁元素耦合度大），可是不容易調試與維護（綁定了移動端與手機端的處理事件）。

頁面性能比較

自適應網站只有移動端的佈局與樣式（內容少），下載到瀏覽器馬上顯示，因此性能快。

響應式網站不只有移動端的佈局與樣式，還有PC的佈局與樣式（內容多），下載到瀏覽器以後進行網頁佈局調整再顯示，因此性能慢。

PS：響應式網站也有提升性能的方法，就是針對屏幕加載不一樣的媒體查詢樣式，選擇性加載資源。可是性能依然不如自適應網站。

用戶體驗比較

響應式網站保證PC端與移動端的一致性，流式佈局;
自適應網站保證移動端更友好的體驗。

SEO比較

自適應網站不容易彙集網站權重，但能夠經過重定向進行彙集權重。
響應式網站容易彙集網站權重，容易把移動端的權重與PC端的權重疊加，提升網站排名。
PS:這種作法是電腦端與移動端使用單獨的網址。

小結

一路看下來，算是對響應式跟自適應有了大體瞭解，所以想總結下：

響應式和自適應最爲關鍵的區別

響應式就至關於液體，它能夠自動適應不一樣尺寸的屏幕，不管你的設備尺寸多麼奇葩。
響應式使用CSS media queries的方法，根據目標設備自動改變風格如顯示類型,寬度、高度等，這能很好解決不一樣屏幕尺寸的顯示問題。

而自適應設計是基於斷點使用靜態佈局，一旦頁面被加載就沒法再進行自動適應，自適應會自動檢測屏幕的大小來加載適當的工做佈局，也就是說，當你要採用自適應設計網站時，你得一個一個設計常見的屏幕布局;

@media

響應式針對的是不一樣分辨率設備而進行的適配式設計，以利用@media規則爲主要手段，
而自適應則忽略@media以比例佈局爲主，目的是適應不一樣的瀏覽器窗口大小。

其餘

推薦開發自適應網站，追求性能與用戶體驗。（大多數的互聯網公司都是web PC端與移動端分離的）

響應式網站不適合開發一些比較複雜的網站。（涉及一些動畫交互效果，頁面元素過多）

建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端如下的尺寸，不過渡到平板端）

簡單粗暴的理解就是@media那樣~

最後附上一個測試響應式的網址，支持跨屏，取需：
http://www.kuapingce.com/

謝謝你們~