利用 CSS3 media query 因畫面大小動態調整網頁畫面配置

網頁的資料是否易於閱讀，常常與版本配置有關，但是現在的可以瀏覽網頁的裝置愈來愈多，採用的解析度也愈來愈複雜，往往為了便於閱讀，常常需要做很多的版面配置。 W3C 為了解決這一個問題，透過 media query 的機制讓開發者可以透過判別畫面解析度的方式，去動態調整 CSS 設定值。
要如何使用 CSS 的 media query 呢？可以採用那兩方式：一、在 <link> 或 <style>  的 media 屬性判斷；二、在 css 檔案或是在 css 描述裡進行 media query 的判斷。

在 <link> 或 <style> 的 media 屬性判斷

若以 link 的方式為例子，透過 media 中的 max-width: 600px; 的判斷，當最大的寬度 < 600px 時，就會再載入 mobile.css ，套用部分的 mobile css 設定。style 也是一樣，可以透過 media 的屬性進行相同的設定。
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width:600px)">

在 css 描述中判斷

若是要在 css 的描述中，則可以透過 @media 中再做判斷，這一個例子上 link 同。將當畫面寬度小 600px 時的相關 CSS 設定，寫在  @media{  ...  } 中。

<style type="text/style">
  body {
    width: 960px;
    margin: 0 auto;
  }
... 中略 ...
  #sidebar{
    float:left;
    width:25%;
  }
@media only screen and (max-width: 600px) {
  body{
    width:660px; 
  }
  #sidebar{
    float: none;
    width: 100%;
  }
}
</style>