Media query可以很複雜，但是這裡KP只談最簡單、最實用的基礎。
Media query的語法
如果去看w3school的教學，可以看到Media query語法結構如下:
@media not|only mediatype and (expressions) {
CSS-Code;
}
media的條件組成有兩種:
1.media-type :針對的設備 ，分成print、screen、speech 、all 四種。
2.expression:MDN是把這叫media feature ，是裝置、環境的特徵。最常見的就是對viewpoint的特徵，min-width 與max-width
聽請來好像有點複雜，所以我就先來學最常用的起手式。
最常見最簡單的起手式
我們要使用media query，最常見的目的是在不同的裝置中設置設置不一樣的樣式。要做到這點,我們最常用的media feature是min-width 或max-width。
另外，media-type我們通常是不會特別設定，所以就忽略它吧。
這樣子，我們最簡單起手式就長這樣(也可以是max-width)。
@media(min-width:xxpx){
CSS-Code;
}
min-width是什麼?
如果我們看到:@media(min-width:400px)，那就代表這個query針對的寬度最小值是400px，也就是寫在這個query的樣式應用到的設備是寬度在400px以上。
我們可以把min-width看成 >=(大於等於)。
max-width是什麼?
同理，如果我們看到:@media(max-width:400px)，那就代表這個query針對的寬度最大值是400px，也就是寫在這個query的樣式應用到的設備是寬度在400px以下。
我們可以把min-width看成 <=(小於等於)。
該用min-width還是max-width?
這就涉及到了你要用mobile first或是desktop first。如果是mobile first就用min-width,desktop first就用max-width。
mobile first就是先從手機板先開發，由小螢幕寫到大銀幕。我們來實際看例子。
css code /*---開頭寫的css是針對0~400px*/
@media(min-width:400px){
CSS-Code;
}
@media(min-width:800px){
CSS-Code;
}
注意Media query的順序
css的樣式不是先寫先贏，而是後面的會覆蓋前面的樣式。因為這樣的特性，我們使用Media query有兩個原則:
1.放在最後面，在不是media query的cs code之後。
2.如果是mobile first,那min-width要從小寫到大。
3.如果是desk first,那max-width要從大寫到小。
如果用min-width從小寫到大大的會覆蓋住小的,例如:大於400的條件會覆蓋住大於800，因為大於400會包含大於800的範圍。
總結
只要掌握住用min-width或是max-width來設置Media query，我們就能實現RWD設計。
min-width就像是大於等於，max-width就像是小於等於。
如果要用Mobile First 的話(kp也建議大家這麼做,至於為什麼，我之後會再做一個視頻 我會在寫其他文章來分享)，就用min-width來從小到大設置。