響應式網頁設計是時下網頁設計領域最熱門的話題之一，該概念由著名網頁設計師 ethan marcotte 在2023年5月份提出，其目標是要讓設計的**能夠響應使用者的行為，根據不同終端裝置自動調整尺寸。
簡而言之，就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。
那麼，怎麼實現響應式設計呢？對於這個問題，我們可以通過css3中的media query來實現，即**查詢。**查詢讓css可以更精確作用於不同的**型別和同一**的不同條件。
**查詢由**型別和乙個或多個監測**特性的條件表示式組成。使用**查詢，可以在不改變頁面內容的情況下，為特定的一些輸出裝置定製顯示效果。沒有css3的**查詢，就不能針對裝置特性設定特定的css樣式。
可以在html頁面的標籤中插入標籤鏈結css檔案時進行**查詢，還可以在css樣式表中使用**查詢。
1.1 首先我們要允許網頁寬度自動調整
在網頁**的頭部，加入一行viewport元標籤：
<
meta name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
viewport是網頁預設的寬度和高度，上面這行**的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。
1.2 語法結構
通過media query我們可以得到不同裝置螢幕的寬和高，從而我們就可以分別處理了。media query語法規則如下：
@media 裝置名 only （選取條件） not （選取條件） and（裝置選取條件），裝置二
根據不同的裝置螢幕寬度，設定不同的css。那麼這裡有兩種方法：
1.2.1
外聯樣式表
在這裡我們可以根據不同的裝置載入不同的css樣式表。
（1）當頁面寬度大於等於960px時，載入樣式表gt-960px.css
<
link rel=
"stylesheet"
type=
"text/css"
media=
"screen and (min-width:960px)"
href=
"css/960px.css"
>
（2）當頁面寬度大於等於600px且小於等於960px時，載入樣式表600px-960px.css
<
link rel=
"stylesheet"
type=
"text/css"
media=
"screen and (min-width:600px) and (max-width:960px)"
href=
"css/600px-960px.css"
>
（3）當頁面寬度小於等於600px時，載入樣式表600px.css
<
link rel=
"stylesheet"
type=
"text/css"
media=
"screen and (max-width:600px)"
href=
"css/lt-600px.css"
>
1.2.2 樣式表中內嵌法
首先先定義在標準瀏覽器下的固定寬度（假如標準瀏覽器的解析度為1024px，那麼我們設定寬為980px），然後用media query來監測瀏覽器的尺寸變化，當瀏覽器的解析度小於1024px的時候，則通過media query預設的樣式表來將頁面的寬度設定為百分比顯示，這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理，當瀏覽器的可視區域改變到某個值（假如為650px）的時候，頁面的結構元素根據media query預設的層疊樣式表來進行相對應的調整。看看我們的例子：
/* 當瀏覽器的可視區域小於980px */
@media screen and （max-width： 980px）
#content
#sidebar
#footer
/* 當瀏覽器的可視區域小於650px */
@media screen and （max-width： 650px）
#searchform
#content
#sidebar
通過上面我們就可以監測瀏覽器的可視區域變化的是時候我們的頁面結構元素也會相對應的變化，當然你可以再多設定幾個尺寸的監測層疊樣式表，這樣子就可以根據不同尺寸裝置來進行響應式的布局。
請注意，在樣式表中設定寬度時，盡量避免使用絕對寬度，如」width:400px;「，嚴謹來說，這是不夠規範的。如果想完全響應式布局的話，就不能使用固定的寬度了，可以設為自動或百分比，如」width:auto;「或」width:xx%;「，另外字型也要設為百分比。
1.5.1 彈性
我們需要為設定max-width: 100%和height: auto，來實現其彈性化
。img
.video embed,
.video object,
.video iframe
那些僅使用**查詢來適應不同視口的固定寬度設計，只會從一組css**查詢規則突變到另一組，兩者之間沒有任何平滑漸變。當某個視口處於**查詢設定的固定寬度範圍之外（可能是某種未知的未來裝置及視口），網頁就需要水平滾動才能完整瀏覽。因此為了展現靈活的設計，在所有視口中都完美顯示，需要將固定畫素布局轉換成靈活的百分比布局。
關於流式布局，我從網路上查到有兩種方式：一種是固定一側，讓另一側自適應;另一種是兩側都自適應，按比例同時放大和縮小。
（1）採用負邊距布局的思路，固定一邊的寬度，自適應另一邊，然後所有的單位還是用px，不同的主流解析度分支下，可能設定不同的尺寸，但一定是用px做單位的。
（2） 關於兩側都自適應的方式，《響應式web設計 html5和css3實戰》中提到乙個公式：
目標畫素寬度 / 上下文元素寬度 = 百分比寬度
作者的思路是從最外層逐漸向內應用該公式將固定畫素轉換成百分比形式。但看到所有單位都要經過乙個除法之後才能得到最終結果值，而這結果值還是類似「margin-right:2.6595745%;」以後布局時，為了得到如此精確地結果，需要多一步計算，個人感覺比較麻煩。
參考：1.
響應式布局實現的**，做的很贊！
2 3
4 css conditional:
響應式web設計
initial scale 1.0 script 不使用width px 只使用百分比寬度width xx 或者width auto 字型也不能使用絕對大小 px 而只能使用相對大小 em 如 font normal 100 helvetica,arial,sans serif 字型大小是頁面預設大...
響應式Web設計
設計師熟知的在印刷 的控制功能，常常也會期望web 會有，但是他們僅僅限制在列印出來的頁面上才能使用。我們必須接受這樣的事實 web根本沒有同樣的限制和為這樣的彈性準備的設計。但是首先我們必須接受這種落差和流程。英國建築師christopher wren有一次開玩笑說他選擇了乙個 以永恆為目標 的領...
響應式Web設計
一 media 查詢 溫故而知新，回顧下自己對 media 查詢的理解吧。查詢相當於是乙個條件，只有滿足了這個條件才會執行 查詢內的樣式表。查詢的語法 media screen and min width 300px 該語句描述了當使用的裝置型別為螢幕時，螢幕的最小寬度大於等於300px時，將應用該...