1.流體網格

流體網格是響應式設計的核心。網格使您可以對齊頁面上的元素，并按照一定的層次結構以視覺上吸引人的方式對其進行布局。流體網格的縮放取決于用戶屏幕的大小，并確保所有頁面元素都緊隨其后。盡管在設計領域中，網格的使用一直存在于設計領域，但是對于網站設計而言，仍然開發了簡單的響應式網格來幫助設計人員和開發人員進行網站設計。在這些響應式網格之后，各種各樣的響應式CSS框架突然出現，它們都將其代碼基于流體網格。

如今，原生網格以“ CSS網格布局模塊”的形式進入CSS。現在，瀏覽器的支持非?？煽?，這為希望探索流暢，響應式網格而無需依賴框架的網站設計人員提供了巨大的可能性。

2.媒體查詢

媒體查詢自2000年代初期就存在，但是直到2012年才成為W3C推薦的標準。像流體網格一樣，媒體查詢代表了響應式網站設計背后的基礎技術。借助媒體查詢，網站可以收集有助于確定訪問者用來訪問它的屏幕尺寸的數據。掌握了這些信息后，便會有條件地加載適合該特定屏幕尺寸的CSS樣式。

3.響應式圖像和媒體

當您只處理文本時，響應式網頁設計會很好地工作。但是，現代網站包含許多媒體，例如圖像和視頻，這可能有些棘手。處理圖像和其他媒體文件的正確方法是使用max-width屬性，而不是使用圖像或媒體文件的尺寸。

如果要包括其他媒體類型，則樣式設置會變得更加細微差別。height屬性將不起作用，因此將填充物應用于容器的底部，然后將介質放置在該容器中是可行的方法。Thierry Koblentz早在2009年就提出了這種方法（hack） ，它仍然是強大的方法。