針對多種螢幕解析度做網頁排版




想像一下十年前上網的樣子:坐在電腦前,一隻手拿著滑鼠,眼睛死盯著螢幕上開著的瀏覽器。而現在,幾乎只要有連線能力的裝置都有辦法上網,電視可以上網、遊樂器可以上網、手機可以上網,操控工具也從原來的鍵盤變成了電視遙控器、搖桿或是你的手指。瀏覽網頁的方式變得多元化之後,網頁也必須要做得更有彈性,讓使用者無論在哪種裝置上都能有良好的使用體驗。

本文就是要針對CSS3的新功能Media Queries(註1)所發展出的Responsive Web Design(註2,找到的翻譯都很怪,自己來亂翻一下-自調式設計模式)來做個介紹。其概念很簡單,既然解析度百百種,我們就先設計好幾種CSS模板(ex. 手機看的、平板看的(直式)、平板看的(橫式)、一般螢幕看的、高解析螢幕看的),然透過Media Queries先取得瀏覽器/裝置的資訊(主要是螢幕解析度以及視窗解析度)之後,決定我們要使用哪種CSS模板來套用至網頁的排版。網頁內容不會改變,只是在不同環境下的呈現方式不同而已。

實作上來說,需要多兩個工作:1. 設計不同情境下使用的CSS,2. 利用Media Queries套用至不同瀏覽環境。喔其實還有第三點,針對不支援原生Media Queries的瀏覽器做設計,詳見後文。
第一點就不多說了,當我們把情況簡化成:手機看的、平板看的(直式)、平板看的(橫式)、一般螢幕看的、高解析螢幕看的,那麼CSS的排版就跟原本一樣,不用考慮太多。

2. 利用Media Queries套用至不同瀏覽環境,這又有兩種方式可完成:

A. 在引入CSS時做判斷
<link href="shetland.css" media="screen and (max-device-width: 480px)" rel="stylesheet" type="text/css"></link>
在這,除了原本的CSS引入語法之外,我們增加了一個判斷屬性media,並且在media裡面判斷:media type要等於screen、以及裝置最大寬度為480px。換句話說,如果你用iphone4看該網頁,shetland.css就會被引入,但如果用一般1024*768的螢幕去看,這個CSS就不會被引入。

B. 在CSS檔案內做判斷
@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}
同樣的效果,如果只是少數class需要針對不同環境作設定也可以這樣做。 至於Media Queries還有什麼其他特別的功能(比如說取得裝置的orientation),可以參考註一。

TIPS:

  1. 在舊的或不支援的瀏覽器(想也知道是IE...)上要怎麼辦?
    a. 現有的Javascript library:JQuery Media Queriescss3-mediaqueries-js
    b. 當效果還是不良時,就沿用舊有的設計方式吧 CSS layout patterns
  2. 針對iphone4專用的css(retina display)
  3. <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
    
  4. 直式橫式套用不同CSS
  5. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
    <link rel=""stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
    

附註:

  1. Media Queries Reference
  2. A List apart - Responsive Web Design
  3. CSS layout with landscape/portrait orientation modes

沒有留言:

張貼留言