Q

：什么是響應式網(wǎng)站？

A

：簡單的來說就是一個界面，能在不同的設備訪問并看到不同的效果。移動設備和移

動網(wǎng)絡的使用已經(jīng)超過傳統(tǒng)

pc

端，隨之而來的是對響應式移動網(wǎng)頁設計等技術的需求空前

高漲。

響應式網(wǎng)頁設計

個人電腦、

平板電腦、

智能手機等這些電子設備品種繁復，

假如一個網(wǎng)站在個人電腦上

顯現(xiàn)無缺，

但是在手機屏幕上打開時會呈現(xiàn)溢出、

頁面呈現(xiàn)橫向翻滾或許頁面在手機上被極

度減小等疑問，

就會無法辨識。

一個網(wǎng)站怎樣在數(shù)十種屏幕上完美顯現(xiàn)，

成為我們所關注的

疑問。

假如要對于每一種終端各做一套頁面，

太耗費人力，維護起來也很艱難。而呼應式頁

面規(guī)劃是一種新的規(guī)劃思想，解決了一個網(wǎng)站在各種屏幕上到達最好顯現(xiàn)作用的疑問。

以下是三種響應式設計模式

縮放、流式布局與響應式

這些術語容易造成混淆，

設計師常常錯誤地交替互用。

實際上，

每個都是布局技巧的顯

著進化過程，像技術演進那樣逐一顯現(xiàn)。

縮放布局，

旨在相對縮放每一個元素。

它們會隨著窗口大小變化動態(tài)縮放內(nèi)容，

就這方

面而言，它們是響應式的。布局本身保持靜止，通過改變每一個元素來保持一致的表現(xiàn)。

流式布局就不一樣，

因為它們隨著窗口尺寸縮放容器元素。

通過

em

這類相對單位可以

做到這點，克服了縮小文字的問題。用戶主動縮放時，設計就被破壞了。

響應式設計不會縮放任何東西。相反，它會根據(jù)窗口尺寸決定顯示哪些內(nèi)容。

元素的扭曲

這有點晦澀難懂，

但本質(zhì)上，

布局顯示在小窗口上的時候，

所有未經(jīng)處理的列都會以行

的形式呈現(xiàn)。這是個問題，因為內(nèi)容的扭曲會不經(jīng)意地改變設計的層級。

解決方法顯而易見，

但令人驚奇的是，

仍有很多人在糾結它：

只要明確地設定元素的寬

度、高度、內(nèi)邊距。如果它移出所處位置，蓋住了其他元素，可以通過將它包裹在

div

容器

中，設置外邊距，迫使它回到原本的地方。

縮放、流式布局與響應式

內(nèi)容區(qū)域通常都隨窗口尺寸變化。

所以當固定寬度圖片超出顯示區(qū)域時，

圖片就被裁剪

了。

通過給圖片設定相對單位，可以避免這個問題。或者使用支持響應式的框架（比如

Bootstrap

），使用響應式圖片

class

名來控制（例如

class=

”

img-responsive

”）。

Q：什么是響應式網(wǎng)站？    

A：簡單的來說就是一個界面，能在不同的設備訪問并看到不同的效果。移動設備和移動網(wǎng)絡的使用已經(jīng)超過傳統(tǒng)pc端，隨之而來的是對響應式移動網(wǎng)頁設計等技術的需求空前高漲。     

響應式網(wǎng)頁設計     

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

以下是三種響應式設計模式     

縮放、流式布局與響應式     

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

縮放布局，旨在相對縮放每一個元素。它們會隨著窗口大小變化動態(tài)縮放內(nèi)容，就這方面而言，它們是響應式的。布局本身保持靜止，通過改變每一個元素來保持一致的表現(xiàn)。   

流式布局就不一樣，因為它們隨著窗口尺寸縮放容器元素。通過em這類相對單位可以做到這點，克服了縮小文字的問題。用戶主動縮放時，設計就被破壞了。    

響應式設計不會縮放任何東西。相反，它會根據(jù)窗口尺寸決定顯示哪些內(nèi)容。     

元素的扭曲     

這有點晦澀難懂，但本質(zhì)上，布局顯示在小窗口上的時候，所有未經(jīng)處理的列都會以行的形式呈現(xiàn)。這是個問題，因為內(nèi)容的扭曲會不經(jīng)意地改變設計的層級。    

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

縮放、流式布局與響應式     

內(nèi)容區(qū)域通常都隨窗口尺寸變化。所以當固定寬度圖片超出顯示區(qū)域時，圖片就被裁剪了。    通過給圖片設定相對單位，可以避免這個問題。或者使用支持響應式的框架（比如Bootstrap），使用響應式圖片class名來控制（例如class=”img-responsive”）。

屏幕大小和分辨率的多樣化，并不是開發(fā)響應式移動網(wǎng)頁設計技術的唯一原因。如果網(wǎng)站采用了響應式設計，就無需為不同設備設計不同的網(wǎng)頁布局。除此之外，由于網(wǎng)站只有一個URL，用戶可通過平板電腦或智能手機輕松、直接訪問，避免了一次次重定向的煩惱。     

相對于普通PC端的展示方式，響應式網(wǎng)站需要遵循一定的設計原則，需要更專業(yè)的設計師布局規(guī)劃，十月科技響應式網(wǎng)站設計制作為用戶提供更多的策劃咨詢服務。