進入移動網際網路時代，各種不同的移動智慧型裝置層出不窮，比如說智慧型手機、平板電腦、可穿戴式裝置等。據2023年8月第40次《中國網際網路絡發展狀況統計報告》的統計結果，截至2023年6月，我國網民規模達到7.51億，其中手機網民達7.24億，佔比達96.3%，較2023年底增長了1.2個百分點，與此同時，使用台式電腦、膝上型電腦等終端上網的比例卻有所下滑。這意味著網民的上網裝置進一步向移動端集中，移動網際網路主導地位進一步強化。但各種不同的移動智慧型終端裝置的螢幕大小和解析度都是不盡相同的，而且即使是同乙個裝置，當使用者旋轉螢幕時，縱向和橫向檢視的螢幕尺寸也會有差異，所以如何使網頁在不同的裝置和不同的螢幕解析度下都能達到理想的顯示效果，使得使用者不管通過什麼終端都能達到理想的瀏覽和使用體驗，是新型的網頁設計與開發技術所要達到的需求。顯然，傳統固定布局的方式已經無法滿足這種需求了，因此，現在越來越多的**都已經開始採用響應式的思想來設計與開發網頁。響應式網頁設計已經成為當今網頁開發技術的新潮流。
響應式網頁設計，全稱是responsive web design，最早是由伊桑·馬卡特（ethan marcotte）在2023年提出的乙個概念，最主要的動機是「如何使得頁面布局適應任何的瀏覽視窗」。響應式頁面的設計理念是，頁面的設計與開發應當能夠根據使用者的行為以及裝置環境（包括系統平台、螢幕尺寸、螢幕定向等）進行相應的響應和調整，也就是頁面應該有能力去自動響應使用者的裝置環境。簡而言之，這個概念指的就是**的頁面能夠相容多種不同的終端，根據不同的環境做出自動的響應及調整。
響應式網頁開發的實現方案有很多，包括css**查詢的使用、彈性網格和布局、流式影象等。無論使用者使用的是哪種裝置，響應式頁面都應該能夠自動切換解析度、尺寸及相關指令碼功能等，以實現自動的適應。
伊桑·馬卡特在其個人**上給出了響應式網頁的簡單示例。這個**雖然簡單，卻具備了響應式網頁的要素：自動適應、流式網格布局、流式影象顯示等等。讀者可以嘗試瀏覽這個網頁，通過手動拖動滑鼠改變瀏覽器視窗的大小，檢視在不同瀏覽器視窗尺寸下頁面顯示的變化。可以看到，在不同的瀏覽器視窗尺寸下，網頁的位址沒有發生變化，但網頁的布局顯示卻可能有所改變，如圖所示。
響應式網頁在不同顯示尺寸下的布局變化
提到響應式網頁，不得不提的就是另乙個「自適應網頁」的概念了。初學者對於這兩個概念往往容易混淆。響應式網頁具有自適應的特性，是指頁面能自動響應及適配使用者的裝置環境，但平常所說的「自適應網頁」是否就是響應式網頁呢？
答案是否定的。適配不同瀏覽環境的技術有很多，而傳統意義上的「自適應網頁」雖然也可以針對不同的瀏覽環境做出自動調整，但其使用的並不一定是響應式網頁的技術。比如早期的一些**或現在一些門戶**的首頁，可以根據檢測到的不同的客戶端而提供不同的瀏覽網頁，比如專門提供乙個android的版本，或者乙個iphone / ipad的版本等，這也是實現**相容不同終端的其中一種做法。我們往往可以看到一些「自適應」**的首頁，用pc端瀏覽時訪問的是類似「www.***.com」的位址，而使用移動裝置訪問的是類似「m.***.com」的位址，可見開啟的並非同乙個網頁。事實上這種做法同時提供了多個不同的網頁，好處是可以極大地保證不同環境下的顯示效果，但是缺點也非常明顯，就是在**維護時需要同時兼顧多個不同版本的網頁，而且維護的工作將會呈幾何級數上公升。假如這個**有多個入口，還會大大地增加架構設計的複雜度。所以，這種使用不同頁面來適配瀏覽條件的方式，往往比較多見於**的首頁，因為如果**的所有內容頁都採用這種方式，這個**的結構將會變得非常臃腫。而類似這種跳轉到不同位址、開啟不同網頁的適配方式，並不能稱為真正的響應式網頁，只能叫作「自適應」的。
響應式網頁的核心思想，在於「一次設計，普遍適用」，強調的是讓同乙個位址的同乙個網頁自動地去適應不同的顯示環境，並且能夠根據螢幕的設定和布局需要，來自動調整網頁內容的顯示。而響應式的**，不管使用什麼裝置，開啟及顯示的都是同乙個位址、同乙個網頁，只是這個網頁可以通過自動地識別螢幕寬度，對不同的使用環境做出相應的自動調整，從而造成網頁的布局和內容展示在不同環境下時可能會有所不同。
開發響應式網頁時，首先我們需要改變一下以往的觀念，在開發時「以移動裝置優先」。為什麼要選擇移動優先呢？第乙個原因就是現在移動裝置的使用率越來越高，而且隨著移動網際網路技術的發展，移動端的應用將成為重點。
還有基於**開發流程方面的考慮。打個比方，想象一下我們搬家的時候，如果我們要把所有的東西從乙個大房子搬到乙個小房子，那麼很有可能空間會比以前擁擠，而且如果東西太多放不下，可能要不得不捨棄掉一些東西，這種「捨棄」有時會是乙個很艱難的決定。但是如果反過來，從乙個小房子搬到乙個大房子，那麼空間會寬鬆很多。同樣的道理，移動端稍微偏小的螢幕尺寸會使得空間比較受限，那麼就要求我們在設計時考慮把最重要的內容優先載入和展示，這樣，即使後面遷移到較大的螢幕，也可以保證整體的結構不會受到破壞，也許為了頁面的美觀可能需要增加一些內容，但畢竟做加法會比做減法容易得多。而且由於大小、頻寬等限制，移動網頁的設計絕大部分應該是內容性的設計，移動優先原則下提高使用者體驗的一**寶，就是「把最重要的東西放在最顯眼的地方」。
在這裡先給出響應式網頁的一些特點。在後面的學習中，我們將深入學習這些特點在網頁中的實現。
響應式程式設計 什麼是響應式程式設計
那麼什麼是響應式程式設計，來看個簡單的例子 var i 1,j 2,k i j print k k k 3 i 3 j 4 print k k k 3在這裡把i,j,k當成某個狀態，k是j,i兩個狀態的組合，正常的程式設計中，在計算了k的狀態之後，再去改變j,i的狀態是不會影響到c的狀態的。所以在正...
響應式程式設計（一）什麼是響應式程式設計
響應式程式設計是相對於阻塞式程式設計，我們在這裡主要講的是springboot2中響應式webflux 了解 webflux，首先了解下什麼是 reactive streams。reactive streams 是 jvm 中面向流的庫標準和規範 處理可能無限數量的元素 按順序處理 元件之間非同步傳...
響應式網頁
1.將width改為max width，來適應螢幕的變動來改變自身寬度等。其他亦然。查詢，參考部分bootstarp框架 當頁面大於1200px時，大螢幕，主要顯示pc端 media min width 1200px 在992 和1199 畫素之間的螢幕裡，中等螢幕，解析度低的pc media mi...