**媒體查詢** 媒體查詢有兩個部分，先是一個設備規范，然后是一個大小規則。使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。 ```css /* 超小屏幕（手機，小于 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } ~~~ ``` *常見的媒體查詢尺寸：*  所以常用到的設置： ```css @media screen and (min-width:320px) and (max-width: 480px){} @media screen and (min-width:480px) and (max-width: 768px){} @media screen and (min-width:768px) and (max-width: 900px){} @media screen and (min-width: 900px) and (max-width: 1024px){} @media screen and (min-width: 1024px){} ``` 當然不是必須按照這樣設置，實際項目中的媒體查詢尺寸要按照客戶要求的媒體尺寸來設置。另外還有注意的一點是媒體尺寸設置的先后順序，不然后面的會覆蓋前面的樣式。我通常是從小到大設置