Media query最簡單的基礎-跟著KP用21天征服Responsive Layout-W3

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來從小到大設置。