自適網頁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裡取得螢幕的真實寬度:

參考資料

WordPress Plugins開發分享

wordpress簡報下載

上面的是我分享的Wordpress套版開發的PowerPoint

其內容截錄如下:

1. WordPress簡介

• 一個以PHP和MySQL為平台的自由開源的部落格軟體和內容管理系統。
• 使用者可以安裝和切換主題。主題可讓使用者不改變部落格內容和結構的情況下更改介面和WordPress站點的功能。
• WordPress非常流行的一個特性是它豐富的外掛模組架構,外掛模組能使使用者和開發者擴充功能WordPress程式的功能。當前WordPress外掛模組資料庫中有超過18000個外掛模組,包括SEO、控制項等等。

2. WordPress基本介紹

• 在WordPress裡,網頁分文章及頁面。
• 頁面: 網頁中的固定頁面,不經常更新,例如關於我們、聯絡資訊。
• 文章: 網頁中的經常性變更頁面,常更新,例如最新資訊、我的作品。
• 每一篇文章及頁面都可以設定是否開啟迴響,迴響是類似留言版的地方,會顯示在網頁的下方。
• 外掛及佈景主題皆可以在官網下載或尋找免費支援,許多免費外掛或主題也有提供功能較完整的付費版本,此為WordPress的主要營收來源。

3. WordPress的佈景檔案有

• style.css 佈景CSS樣式
• header.php 各頁共用的網頁頭部
• footer.php 各頁共用的網頁底部
• sidebar.php 邊欄模組
• index.php 首頁
• single.php 單頁文章
• page.php 網誌分頁
• comments.php 迴響模版
• functions.php 佈景設定
• archive.php 文章彙整
• 404.php 找不到頁面
• search.php 站內搜尋結果

4. 頁面層級結構

• WordPress的頁面有層級的結構存在,當12個php檔案並沒有全部都存在時,便會自動尋找前一層級的來替代。
• 一個佈景主題裡至少要有style.css及index.php
2013-07-01_143700

 

製作WordPress的第一個Plugins開發

1. 在wp-content\plugins下隨意新增一資料夾,建立一隻php檔案,在這邊我是命名為Claire.php
2. 在Claire.php裡加入下列程式碼

然後至後台的=>外掛,就可以看到剛剛新增的外掛的資訊了!
2013-03-29_122704
將之啟用,變可以在文章的底下,看到fb的按讚連結了!