響應式網頁設計（responsive web design）這個概念在2023年的時候就有人提出來了，其實我更喜歡將其翻譯為自適應網頁設計，阮一峰關於responsive web design的一篇文章就是翻譯為自適應網頁設計，但是國內都採用了響應式網頁設計這一生硬的翻譯（你能第一次看到響應式網頁設計這種稱呼而聯想到他的具體含義嗎？）。既然這種二流翻譯已經是主流，我也採用響應式網頁設計這一說法。
在阮一峰的自適應網頁設計這篇文章中他舉了乙個例子來說明這種設計的應用.
下面是對阮一峰這篇文章中該片段的引用：
-------------------------------分割線以內為引用---------------------------------
他製作了乙個範例，裡面是《福爾摩斯歷險記》六個主人公的頭像。如果螢幕寬度大於1300畫素，則6張併排在一行。精心開發5年的ui前端框架！
如果螢幕寬度在600畫素到1300畫素之間，則6張分成兩行。
如果螢幕寬度在400畫素到600畫素之間，則導航欄移到網頁頭部。
如果螢幕寬度在400畫素以下，則6張分成三行。精心開發5年的ui前端框架！
mediaqueri.es上面有更多這樣的例子。
這裡還有乙個測試小工具，可以在一張網頁上，同時顯示不同解析度螢幕的測試效果，我推薦安裝。
-------------------------------引用結束---------------------------------
原文只是用說明了什麼叫自適應，但是沒有給出實現的方法。
下面來講講關於響應式網頁設計的幾個知識點：
一、移動裝置的viewport
什麼是viewport呢？
手機瀏覽器是把頁面放在乙個虛擬的「視窗」（viewport）中，通常這個虛擬的「視窗」（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支援。精心開發5年的ui前端框架！
「viewport」，翻譯為中文可以叫做「視區」，大家都知道移動裝置的螢幕一般都比pc小很多，webkit瀏覽器會將乙個較大的「虛擬」視窗對映到移動裝置的螢幕上，預設的虛擬視窗為980畫素寬（目前大部分**的標準寬度），然後按一定的比例（3：1或2：1）進行縮放。也就是說當我們載入乙個普通網頁的時候，webkit會先以980畫素的瀏覽器標準載入網頁，然後再縮小為490畫素的寬度。注意這個縮小是乙個全域性縮小，也就是頁面上的所有元素都會縮小。
乙個常用的針對移動網頁優化過的頁面的 viewport meta 標籤大致如下：
.**
1, maximum-scale=1″>
viewport是網頁預設的寬度和高度，上面這行**的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。使用者縮放到的最大比例為1.0，即使用者不能通過手勢縮放。沒有專門針對移動裝置優化的**都是自由縮放的。
width：控制 viewport 的大小，可以指定的乙個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 css 的畫素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許使用者縮放到的最大比例。
minimum-scale：允許使用者縮放到的最小比例。
user-scalable：使用者是否可以手動縮放精心開發5年的ui前端框架！
二、用media queries來為不同裝置採用不同的css布局
viewport實現的自適應效果非常差強人意，絕大多數**都是用media queries來實現自適應的，但同時我看到很多使用了media queries的網頁同時也加了viewport，一般他們這樣定義：
.**
"viewport" content="width=device-width, initial-scale=1.0">
我發現去掉這句**不會有任何變換，所以總覺得viewport這個東西很雞肋，對於這個問題我在media queries和viewport的困惑一文中作了一些解釋，雖然連我自己都還是沒有搞清楚但是還是建議你去看一下。
回到media queries的使用上來。
先舉個例子，大家看這個demo。
響應式設計demo
乙個普通的自適應顯示的三欄網頁，當你用不同的終端來檢視這個頁面的時候，他會根據幾種終端來顯示不同的樣式，在電腦上是三列，在pad上應該也是三列，在大屏手機上是三行，在螢幕小於320的手機上只顯示主要內容，隱藏掉了次要元素。（這裡關於響應式布局還有個比較好的訊息，就是拖動瀏覽器也可以觸發判斷條件，測試的時候你不需要去找一堆手機，只要把自己的瀏覽器視窗縮小到一定尺寸就可以了，這個demo也可以用拖動瀏覽器大小的方式測試。）在檢視這個demo的時候你可以不斷拖動來改變瀏覽器視窗寬度，你會發現隨著寬度的變化，布局和中間div的背景都會隨著改變。
這就是乙個最簡單的 響應式布局 的頁面。我們就從這個例子裡認識下media query屬性吧。 精心開發5年的ui前端框架！
.**
@media screen and (min-width: 320px) and (max-width : 479px)
就從這個條件語句開始介紹，media屬性後面跟著的是乙個 screen 的**型別（上面說過的十種**型別之一）。然後用 and 關鍵字來連線條件（其他關鍵字還有 not， only，看字面大家能理解，就不多說。），然後括號裡就是乙個**查詢語句，稍微懂點css的同學都能看懂，這個條件語句意思是在大於320小於479的解析度下所啟用的樣式表。
這個語句，就是響應式布局的基礎應用了。在判斷終端解析度大小之後，賦予不同的樣式進去，就像我們的例子裡 精心開發5年的ui前端框架！
.**
@media screen and (max-width : 320px)
} @media screen and (min-width: 800px) and (max-width: 1024px)
}
網頁設計入門 列表
一 無序列表 ul unordered lists ul li 列表內容1 li li 列表內容2 li li 列表內容3 li ul list style type disc 實心圓 circle 空心圓 square 正方形 none 如果要分別定義每個列表的樣式，可以通過如下代表實現 html...
響應式網頁設計示例
若要全方位測試你自己或別人的響應式 則需要針對每一種裝置和不同的螢幕尺寸，分別準備不同的測試系統。儘管這是最完美的辦法，但通過改變瀏覽器視窗大小其實就可以完成大多數測試。除此之外，還有很多第三方外掛程式和瀏覽器擴充套件可供選擇，通過它們可以將當前瀏覽器視窗或視口設定為指定畫素。必要時，還可以自動將當...
響應式網頁設計初探
我首次接觸響應式網頁設計還要從應用bootstrap說起。我們運用bootstrap的網格類簡單的將響應式設計帶入我們的網頁設計當中，當然bootstrap框架其實還做了其他事情以支援網頁響應式設計。現在，就讓我們一窺響應式網頁設計背後的原理。實現響應式設計的前提 允許網頁縮放 視口的 meta 標...