響應式入門之 Media Query

響應式**設計？

響應式**設計，能讓你的頁面在所有客戶端瀏覽器上表現的都非常好。

響應式**只要有html和css就可以了。當然如果有特殊要求，適當加入js也是有必要的。

什麼是視口？

就是使用者能看到的頁面可見區域就叫視口。

在平板電腦和手機出現之前，網頁只為電腦螢幕而設計。那個年代，乙個頁面往往只有一種布局，固定的尺寸。

後來平板電腦和手機出現之後，為了能更好的顯示頁面，起初瀏覽器廠商的解決方案是提供乙個自動縮放的功能。把pc頁面縮放到手機螢幕那麼大。盡量讓頁面全部顯示出來。感覺還不錯。畢竟內容全部顯示了。

但是預設情況下，頁面文字很小。小的可憐，幾乎看不見。很快，響應式**的設計方案也緊羅密布地制定開來。各大瀏覽器廠商開始制定統一標準。以推進響應式**的發展。

設定視口

具體一點就是：12

3456

789在 html 中，meta 標籤沒有結束標籤，meta標籤定義了與文件相關聯的名稱或值。可提供有關頁面的元資訊。

width=device-width 樣式中定義的寬度等於裝置中定義的寬度

initial-scale=1.0 縮放比例1

minimum-scale=1.0 最大縮小比例1

maximum-scale=1.0 最大放大比例1

上段**的最終作用是，移動客戶端會按你設定的尺寸來顯示頁面。並且比例是1，不可通過手勢放大縮小。如果不寫這段**，移動客戶端的瀏覽器真的會以它的1px來顯示你設定的1px。最終效果是被縮放的效果，字小小的那種。總之，做響應式**的時候記得至少要加上如下宣告。

1 今天的主題：什麼是media query？

css2允許使用者對特定media型別制定樣式。

例如：針對screen（螢幕）用 @media screen裡設定的樣式。針對列印樣式用 @media print 裡的樣式。

css3提供了更加強大的功能。可以針對不同media型別設定樣式，還根據設定的寬度或者高度指定樣式。

咱看下面的例子：12

3@media screen and (max-width: 500px)

}意思就是：當螢幕的寬度小於等於500px的時候body的背景顏色為黑色。

平時可用如下口訣幫助記憶：

「當」，這個時候寫 @media 「螢幕」，寫screen 「的最大寬度為」， and (max-width:) 「500px」， max-width:後加上500px 「的時候」，這個時候加上大括號。

拼在一起就是： @media screen and (max-width: 500px) {} 然後大括號裡就寫我們要設定的樣式。

是不是很容易記憶？多寫幾遍就會了。

相關英語

viewport = 視口

content = 內容

device-width = 裝置寬度

initial-scale = 初始-比例

minimum-scale = 最小-比例

maximum-scale = 最大-比例

media = **

query = 查詢