2012-03-15

利用 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>
Related Posts Plugin for WordPress, Blogger...

沒有留言 :

張貼留言

,,