[TOC] # 響應式布局設計 響應式設計指的是不同設備、屏幕、分辨率、操作方式（鼠標、鍵盤、觸摸），保證信息在不同環境下表現一致，保證可交互可操作。 由于頁面的寬度發生了變化，進而信息展現也改變了就是響應式設計。直到最后在手機屏幕上的顯示圖片信息變成了一列。  對頁面進行響應式的設計實現，需要對相同內容進行不同寬度的布局設計，有兩種方式：桌面優先（從桌面端開始向下設計）；移動優先（從移動端向上設計）； 無論基于哪種模式的設計，要兼容所有設備，布局響應時不可避免地需要對模塊布局做一些變化（當頁面寬度發生變化的尺寸范圍就是臨界點的概念。所以做響應式設計時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應清晰的一個臨界點，制定了臨界點之后就知道，當屏幕的寬度范圍位于哪一個點的時候，我們的頁面信息該如何展示。） 我們通過JS獲取設備的屏幕寬度，來改變網頁的布局，這一過程我們可以稱之為布局響應屏幕。 常見的主要有如下幾種方式： ## 1、布局不變，即頁面中整體模塊布局不發生變化，主要有：    ## 2、布局改變，即頁面中的整體模塊布局發生變化，主要有：    很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能時保持簡單輕巧，而且同一臨界點內（發生布局改變的臨界點稱之為臨界點）保持統一邏輯。否則頁面實現得太過復雜，也會影響整體體驗和頁面性能。