自適網頁RWD開發心得

最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎?

是的!最近我在進行部落格的版面小修改!
主要訴求是要將版面改版成具有專業感、清楚、易讀,
然後呀,本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!!

其實自適網頁說穿了,只是用多組的CSS,可以在不同瀏覽環境下切換畫面的CSS,
這可以讓同一個網頁在手機以及電腦上,呈現不一樣的樣子。

RWD一般最常見是使用media queries,利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。

我的開發心得

那這次的改版過程中,下面幾點是我覺得在開發RWD時要去注意的

  1. 若有需要使用JS去做網頁動態,不要將CSS直接在JS裡面加,例如

    類似上面的這種的作法都要通通避免,JS一定要避免掉所有和版面有關的設定
    像上面這種寫法,應改成:


    這樣可以避免在切換為不同顯示方式時彼此互鄉干擾到。
  2. CSS選擇器的優先順序:
    因為在套用時,會有共通的、在某些解析度才要使用的CSS設定。
    假如當今天總共有四種不同瀏覽裝置有四種不同版面,其中想在某一種特別的裝置上套用一系列不同的CSS(只是改字體什麼等)。會需要更清楚的了解各種選擇方法在執行時的優先順序,才能用不同的選擇器去覆蓋原有設定。
    這邊有關於選擇器優先順序的詳細說明:如何撰寫有效率的CSS選擇器(CSS Selector)
  3. HTML格式架構:
    因為要應付多種的CSS套版,HTML的格式設計就很重要,應要能夠清楚表達各元素之間的子從關係,並且符合W3C的規範,這樣子在換CSS時才可以順利在不更改HTML的狀況下去更動顯示方式。

Media Queries設定方式

  1. 直接分成不同的CSS檔案,在HTML載入時宣告此CSS作用的對象
  2. 在CSS檔裡面設定作用對象

條件的用法

@media [media type] and [(media feature)]

例:如果視窗最小寬度為500px,就套用這些CSS
@media screen and (min-width:500px) {.....}

例:如果視窗為直立,就套用這些CSS
@media screen and (orientation: portrait) {.....}

例:如果視窗在400px和700px之間(兩者需同時符合),就套用這些CSS
@media screen and (min-width: 400px) and (max-width: 700px)

例:如果是彩色螢幕或彩色投影機兩者之一(兩者符合一種即可),就套用這些CSS
@media screen and (color), projection and (color) {.....}

屬性和值

  1. media type類型:
    2013-12-30_175631
    比較要注意的是,handheld這個值其實並沒有辦法有效的判別是否為手持設備,現在會讀handheld的手機瀏覽器有:OpenWave, Nokia lite-web browsers, Netfront, Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9,Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and 8.x。所以若是要判別是否是使用iPhone或Android手機,可以使用下面的判斷式:
  2. media features
    * (max-或min-)width:[數字]
    * (max-或min-)height:[數字]
    * (max-或min-)device-width:[數字]
    * (max-或min-)device-height:[數字]
    * orientation:portrait 或 landscape
    * aspect-ratio:[比值]
    * (max-或min-)device-aspect-ratio:[比值]
    * color
    * color-index
    * monochrome
    * (max-或min-)resolution:[數字]dpi
    * scan(只對tv)
    * grid
  3. 在JS裡取得螢幕的真實寬度:

參考資料

CSS Vertical Align(用純CSS解決div垂直置中)

本文出處:http://blog.yam.com/hanasan/article/35806444

本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。
說實話這並不太容易,雖然不像水平置中 {margin:0 auto;} 那樣單純, 但仍有幾種方式可以作到,以下共有五種方式一一介紹。

每種使用方式各有其優、缺點,端看自己要置中的內容是「區塊」或是「文字」來取捨。

方法一

使用CSS table-cell屬性來完成,什麼是table-cell?簡單說就是針對一些html object附于它table的屬性(詳見此), 如果曾經使用過table來排版的網頁開發者,應該知道td的既有屬性valign,古早以前根本不會有垂直置中的問題,因為td下個 valign=”middle”就行了。 而table-cell即是可以將div模擬成表格(table)的儲存格(td),讓原本不存在vertical-align的div可以使用。

Sample Code

HTML

CSS

優點:

  1. 因為是CSS2.1釋出的標準屬性,正規的解決方法。
  2. 被置中的內容增加後,垂直置中的block會自動調整。

缺點:

  1. 支援性不佳,IE8以上才支援(IE7以下不支援display:table語法)
  2. 太多巢狀標籤(有種回到過去table排版的fu)

方法二

此方法適用在定義了絕對定位(absolute)的div, 將其top設置為50%, 再設置與div高度一半的「負」值margin-top,意謂著使用本方法必須固定div的高度。

Sample Code

HTML

CSS

優點:

  1. 程式碼簡短,且無需為了「垂直置中」的目的多寫巢狀標籤
  2. 所有browser都支援,泛用性高

缺點:

  1. div高度需固定,若是動態資料有可能超過的話需要加上overflow:scroll讓溢出的內容可以看見

方法三

 

在需要被垂直置中的div前放置另一個div,設置為height:50%,margin-bottom:-contentHeight(目標高度的負值)

Sample Code

HTML

CSS

優點:

  1. 所有browser都支援(Note:IE7必須在#floater追加width:1px才work!)
  2. 當內容增加時,垂直置中的div不會被切掉,而是會自動出現scroll-bar

缺點:

  1. 沒甚麼缺點,真要說就是一樣高度得固定。另外若置中物件的父層是body, 即使視窗被USER拖曳拉小了,div也一樣會唯持置中(笑)

方法四

本法使用在同樣是絕對定位(absolute)的div上,固定高度,並定義top:0; bottom:0; 和廣為被應用的
{ margin:0 auto; }作div水平置中原理類似

Sample Code

HTML

CSS

優點:

  1. 簡單

缺點:

  1. 不支援IE7(含)以下
  2. 如果容器不夠裝內文, 也不會有scrollbar自動出現…

方法五

此方法適用於「單行」文字的垂直置中(EX:要作英文網站大Slogan時), container除了設置高度之外,同時也將行距(line-height)設置與高度相等。

Sample Code

HTML

CSS

優點:

  1. 簡單
  2. 所有browser都支援(even IE6!)
  3. 即使內容溢出也不會被切掉

缺點:

  1. 只有單行文字適合
  2. 若div寬度固定,一當有長文字爆行時會很醜,務必小心使用。

以上列出五種使用純CSS(不加js)達成div vertical align(垂直置中)的藥方,可以綜合搭配使用,也可視情況單獨使用…