響應式**設計？
什麼是視口？
就是使用者能看到的頁面可見區域就叫視口。
在平板電腦和手機出現之前，網頁只為電腦螢幕而設計。 那個年代，乙個頁面往往只有一種布局，固定的尺寸。
後來平板電腦和手機出現之後，為了能更好的顯示頁面，起初瀏覽器廠商的解決方案是提供乙個自動縮放的功能。把pc頁面縮放到手機螢幕那麼大。盡量讓頁面全部顯示出來。 感覺還不錯。畢竟內容全部顯示了。
但是預設情況下，頁面文字很小。小的可憐，幾乎看不見。 很快，響應式**的設計方案也緊羅密布地制定開來。 各大瀏覽器廠商開始制定統一標準。以推進響應式**的發展。
設定視口
具體一點就是：
在 html 中，meta 標籤沒有結束標籤，meta標籤定義了與文件相關聯的名稱或值。可提供有關頁面的元資訊。
width=device-width 樣式中定義的寬度等於裝置中定義的寬度
initial-scale=1.0 縮放比例1
minimum-scale=1.0 最大縮小比例1
maximum-scale=1.0 最大放大比例1
上段**的最終作用是，移動客戶端會按你設定的尺寸來顯示頁面。並且比例是1，不可通過手勢放大縮小。 如果不寫這段**，移動客戶端的瀏覽器真的會以它的1px來顯示你設定的1px。最終效果是被縮放的效果，字小小的那種。 總之，做響應式**的時候記得至少要加上如下宣告。
今天的主題：什麼是media query？
css2允許使用者對特定media型別制定樣式。
例如： 針對screen（螢幕）用 @mediascreen裡設定的樣式。 針對列印樣式用 @mediaprint 裡的樣式。
css3提供了更加強大的功能。 可以針對不同media型別設定樣式，還根據設定的寬度或者高度指定樣式。
咱看下面的例子：
@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 = 查詢
響應式入門之 Media Query
響應式 設計？響應式 設計，能讓你的頁面在所有客戶端瀏覽器上表現的都非常好。響應式 只要有html和css就可以了。當然如果有特殊要求，適當加入js也是有必要的。什麼是視口？就是使用者能看到的頁面可見區域就叫視口。在平板電腦和手機出現之前，網頁只為電腦螢幕而設計。那個年代，乙個頁面往往只有一種布局，...
CSS3響應自適應布局Media Queries
media queries是css3新增加的乙個模組功能，其最大的特色就是通過css3來查詢 然後呼叫對應的樣式。在徹底地了解media queries之前，我們需要了解其中的兩個重要部分，第乙個是 型別，第二個是 特性。型別 media type 在css2中是乙個常見的屬性，可以通過 型別對不同...
響應式網頁設計入門
響應式網頁設計 responsive web design 這個概念在2000年的時候就有人提出來了，其實我更喜歡將其翻譯為自適應網頁設計，阮一峰關於responsive web design的一篇文章就是翻譯為自適應網頁設計，但是國內都採用了響應式網頁設計這一生硬的翻譯 你能第一次看到響應式網頁設...