什麽是響應式網站？

即：一(yī)個界面，能在不同的設備端訪問，并看到不同的界面效果。移動設備和移動網絡的使用頻(pín)率已經遠超傳統pc端，随之而來的是對響應式移動網頁設計等技術的需求倍增。

響應式網頁設計

台式電(diàn)腦、平闆電(diàn)腦、智能手機這些多樣性的電(diàn)子設備，假如一(yī)個網站在個人電(diàn)腦上顯現無缺，在手機屏幕上打開(kāi)時會呈現溢出、頁面呈現橫向翻滾或者頁面在手機上被極度減小(xiǎo)等疑問，就會無法辨識。一(yī)個網站怎樣在數十種屏幕上完美顯現，成爲我(wǒ)(wǒ)們所關注的疑問。假如要對于每一(yī)種終端各做一(yī)套頁面，太耗費(fèi)人力，維護起來也很艱難。而呼應式頁面規劃是一(yī)種新的規劃思想，解決了一(yī)個網站在各種屏幕上到達最好顯現作用的疑問。

三種響應式設計模式：

1、縮放(fàng)、流式布局與響應式

這些術語容易造成混淆，設計師常常錯誤地交替互用。實際上，每個都是布局技巧的顯著進化過程，像技術演進那樣逐一(yī)顯現。

縮放(fàng)布局，旨在相對縮放(fàng)每一(yī)個元素。它們會随着窗口大(dà)小(xiǎo)變化動态縮放(fàng)内容，就這方面而言，它們是響應式的。布局本身保持靜止，通過改變每一(yī)個元素來保持一(yī)緻的表現。

不同分(fēn)辨率下(xià)縮放(fàng)布局的例子，

這種設計爲了統一(yī)犧牲了易讀性

流式布局就不一(yī)樣，因爲它們随着窗口尺寸縮放(fàng)容器元素。通過em這類相對單位可以做到這點，克服了縮小(xiǎo)文字的問題。用戶主動縮放(fàng)時，設計就被破壞了。

不同分(fēn)辨率下(xià)流式布局的例子，這種設計爲了易讀性犧牲了統一(yī)

響應式設計不會縮放(fàng)任何東西。相反，它會根據窗口尺寸決定顯示哪些内容。

2、元素的扭曲

這有點晦澀難懂，但本質上，布局顯示在小(xiǎo)窗口上的時候，所有未經處理的列都會以行的形式呈現。這是個問題，因爲内容的扭曲會不經意地改變設計的層級。

列變成了行，扭曲了内容

解決方法顯而易見，但令人驚奇的是，仍有很多人在糾結它：隻要明确地設定元素的寬度、高度、内邊距。如果它移出所處位置，蓋住了其他元素，可以通過将它包裹在div容器中(zhōng)，設置外(wài)邊距，迫使它回到原本的地方。

3、縮放(fàng)、流式布局與響應式

内容區域通常會随窗口尺寸變化。所以當固定寬度圖片超出顯示區域時，圖片就被裁剪了，滾動條，内容被推到屏幕之外(wài)

通過給圖片設定相對單位，可以避免這個問題。或者使用支持響應式的框架（比如Bootstrap），使用響應式圖片class名來控制（例如 class="img-responsive"）。

同樣的元素，用響應式圖片class命名的方式，滾動條就不見了。

屏幕大(dà)小(xiǎo)和分(fēn)辨率的多樣化，并不是開(kāi)發響應式移動網頁設計技術的唯一(yī)原因。如果網站采用了響應式設計，就無需爲不同設備設計不同的網頁布局。

除此之外(wài)，由于網站隻有一(yī)個URL，用戶可通過平闆電(diàn)腦或智能手機輕松、直接訪問，避免了一(yī)次次重定向的煩惱。