前段時間，因為專案需要，略微接觸了一下響應式設計。在此記錄一些經驗之談。
我所理解的響應式設計， 是**能響應當前螢幕的寬度，呈現相應合適的樣式和內容。比如在手機端，手機端螢幕較小，而且使用者可能在3g網路下訪問。**在手機端下顯示的時候，呈現的內容較之桌面要少一些，所消耗的流量也要少些。通過css的**查詢，可以控制在各解析度內容的顯示。要減少流量消耗，一些專業的**都是為手機端另外做乙個頁面。
響應式的設計，可以從解析度由大到小，也可以從解析度由小到大開始設計。我們目前嘗試的是先完成桌面端，再適配解析度較小的裝置。其中的要點是斷點的設定。因為裝置的多樣性，為每一種解析度寫css**查詢是很累人的事。所以需要確定一些解析度，在這些解析度下，頁面的布局會亂掉。在這些解析度（斷點）下，再去設定**查詢。還要注意靈活的布局，以便解析度處在斷點與斷點時，能較好的呈現。
除了確定斷點外，還有以下三個要點要注意。
1，瀏覽器視口和裝置視口。就是瀏覽器的寬度和裝置的寬度。在一些android裝置上，瀏覽器缺省會以比裝置寬度更大的解析度來顯示**，所以如果你開啟某個沒有設定過的**的話，一開始你只能看到一部分，然後拉動或放大，才能看到其餘部分。裝置視口是固定的，瀏覽器視口是可以設定的。，這個設定語句的意思是，將瀏覽器寬度設定成和裝置寬度相等，初始的縮放比例為1。需要注意的是，這裡的瀏覽器寬度並不一定是頁面的寬度。瀏覽器寬度作用於**查詢，而頁面的實際寬度可能會超出所設定的寬度。縮放比例只是純粹的放大縮小，並不會影響瀏覽器寬度和**查詢之間的相互作用。
2，**查詢。確定了斷點，設定了視口之後。寫css**查詢就差不多是體力活了。在支援**查詢的瀏覽器上開啟你的**，改變瀏覽器的寬度，看看查詢語句是否有效，布局是否合理。
3，css特殊性。應該說，這是乙個坑。一般情況下，我們通過css設定了某個元素：.header｛width:1200px;}，在之後某個範圍改變寬度：@media all and (max-width:800)｛.header｛width:800px;}}。在ipone4、5的預設瀏覽器下，**查詢是起作用的。但是到了android的自帶瀏覽器下，就不起作用了。事情是這樣的：根據特殊性的規則，兩個地方設定width的權重是相同的，在後的特殊性就要強一點。這是正確的情況。但是在android下並不是這樣，
權重相同的情況下，在**查詢語句裡的屬性特殊性要低一點，所以在小於800的解析度下，width:800不起作用。解決的方法是，在查詢語句裡設定更強高的權重，不要依賴先後順序。比如上面的查詢語句可以改為
@media all and (max-width:800)｛body .header｛width:1200px;}}。
搞定了上面提到的這些，適配各個裝置就不是什麼問題了。在互動方面，比較常用的是touch。不過在使用touch時要注意防止冒泡，因為在document上，瀏覽器預設都會有些行為，這些行為會短暫的獲取焦點，而導致touch被打斷，使得執行touch時顯得不靈敏。
對於響應式的實現就先寫到這裡。
注：測試的瀏覽器包括android4.0、 4.2下的預設瀏覽器，uc瀏覽器，ipone4、5下的預設瀏覽器。
響應式網頁設計初探
我首次接觸響應式網頁設計還要從應用bootstrap說起。我們運用bootstrap的網格類簡單的將響應式設計帶入我們的網頁設計當中，當然bootstrap框架其實還做了其他事情以支援網頁響應式設計。現在，就讓我們一窺響應式網頁設計背後的原理。實現響應式設計的前提 允許網頁縮放 視口的 meta 標...
響應式實現
一 css實現響應式 css響應式的實現主要依賴於css 查詢 查詢包含乙個可選的 型別和零或多個表示式來限制使用 特性的樣式表範圍,例如 width，height，color。css3中的media queries讓內容的呈現可以只針對特定範圍的輸出裝置而不必去改變內容本身。即通過 查詢判斷螢幕寬...
實現響應式布局
響應式網頁設計現在無疑是一件大事情。如果你還不了解響應式設計，可以看看我最近發表的 響應式站點列表 譯者注 可以好好看看示例中的 在不同解析度下的展現方式 對新手來說，響應式設計 可能有一點複雜，但是事實上比你想象的簡單。為了幫助你迅速的了解響應式設計，我起草了一篇快速教程。你可以在3個步驟中學習到...