1.視口viewport
meta:vp+tab鍵生成，做響應式設計，設定視口寬度與裝置寬度統一。
2.**查詢語法
2.1**型別
all 用於所有裝置
screen 用於電腦螢幕，平板電腦，智慧型手機等。
print 用於印表機和列印預覽
speech 輔助閱讀器等發聲裝置，適用於盲人。
先寫預設樣式，再寫**查詢樣式。
預設樣式：
.box
列印時的樣式：
@media print }
2.2**特性
width 視口寬度
max-width 最大視口寬度
min-width 最小視口寬度
當螢幕寬度是 800px：@media (width:800px)
當螢幕寬度小於640px：@media(max-width: 640px)
當螢幕寬度大於等於1024px：@media (min-width: 1024px)
2.3**查詢運算子
①.and 並且
>=640 並且 <=1024 視口寬度
@media (min-width: 640px) and (max-width: 1024px)
②., 或者
<=640 或者 >=1024
@media (max-width: 640px),(min-width:1024px)
③.not 否定 一定要指定**型別，因為**型別預設all，not後永遠返回假。
不可用於**特性(像寬度)
除了印表機：@media not print
④.only 用於**型別
只是印表機：@media only print
2.4**查詢用法
①.寫在一起，推薦使用
.box
@media (max-width:640px) }
②.寫兩套css，一套預設的css樣式直接用link引入；一套**查詢的樣式也是直接寫樣式，在link引入的時候用media=」適用的螢幕」標明是**查詢的樣式。
③.@import url() 只支援**型別 會增加請求次數，不常用。
@import url(『index-640.css』) print;表示若當前**型別是印表機，則引入index-640.css
3.閾值設定
3.1常用設定
①.兩個斷點： 640px 1024px
小螢幕 <=640px
中等螢幕 641px ~ 1024px
大螢幕 >1024px
②.三個斷點： 768px 992px 1200px
手機 超小螢幕 <= 768px
平板 小螢幕 769px ~ 992px
中等螢幕 993px ~ 1200px
大螢幕 > 1200px
③.四個斷點： 576px 768px 992px 1200px
超小螢幕 <=576px
小螢幕 577px ~ 768px
中等螢幕 769px ~ 992px
大螢幕 993px ~ 1200px
超大螢幕 >1200px
3.2移動優先
先設定移動的預設樣式，width:100%->用**查詢設定大於768px的@media(min-width:768px)樣式->大於992px->大於1200px
通常設定方式：
大於768px時，寬度設定為750px
大於992px時，寬度設定為970px
大於1200px時，寬度設定為1170px
3.3pc優先
先設定pc端的預設樣式，固定width:1170px;->用**查詢設定小於1200px的
->小於992px->小於768px
通常設定方式：
小於1200px時，寬度設定為970px
小於992px時，寬度設定為750px
小於768px時，寬度設定為100%
4.響應式
方案一：百分比設定的寬度 img
方案二：**查詢設定img隱藏和顯示
先設預設，大圖block，小圖none->用**查詢設定小螢幕的，大圖none，小圖block。
方案三：**查詢動態設定背景，用背景圖，適合沒有文字。
在各個螢幕下引入背景圖。
先設定預設樣式，用padding-top把高度撐起來，設定的是百分比，計算方法是的高度除以寬度(高度小於寬度)，然後設定background-size: 100% 100%;讓背景圖和元素一樣大。
設定其它螢幕的樣式。換張背景圖，按照上面的方法計算padding-top的百分比。
方案四：
middle.png 1080w,
small.png 640w」
sizes="(max-width:640px) 640w,
(max-width:1080px) 1080w,
1440w">
當瀏覽器視口寬度小於1440px時載入大圖，小於1080px時載入中圖，小於640px時載入小圖。
若瀏覽器支援srcset，就不用src的，找個接近srcset的顯示。
若瀏覽器不支援srcset，就用src的那張。
srcset顯示的時候按接近，sizes是精確確定範圍的。
此方案測試時，注意清除快取。
方案五：標籤，標籤 推薦使用。
在source中用srcset指定，用media指定範圍。
響應式設計
響應式設計 樣式設計適應各種不同解析度尺寸 學習1.css3 media queries 2.樣式覆蓋 考 the orientation media query 一文。我們可以建立多個樣式表，以適應不同裝置型別的寬度範圍。將多個media queries整合在乙個樣式表檔案中 50 smartph...
響應式設計
響應式設計簡單說呢就是針對不同的螢幕解析度應用不同的css樣式，這裡有兩個關鍵點 一是如何在不修改dom結構的前提下調整布局 二是如何判斷螢幕解析度並應用對應的css 以上兩點應該不依賴於js.1 實現第一點依靠的是流式布局，就是所有參與布局的div都用float left，寬度都用百分比表示 圖一...
響應式設計
響應式設計就給不同解析度設計不同 顯示合理美觀 的樣式，也就是說設計師多設計幾套樣式，在使用者訪問的時候，根據使用者使用的螢幕解析度展現給使用者相應的頁面 呼叫相應的樣式 一 設計師了解市面上所使用的解析度，收集資訊 二 設計師根據不同解析度給頁面設計不同的樣式 三 呼叫樣式 1 直接在同個樣式樣式...