簡介Responsive Web Design



在過去幾年,桌面端瀏覽器與行動裝置瀏覽器頁面設計,界線基本上是相當分明的。

隨著行動裝置快速普及,並為減輕網頁設計師對於頁面設計的負擔,將傳統桌面端瀏覽器的頁面與行動裝置瀏覽器的頁面整合唯一,Responsive Web Design 自動版型調整的設計理念,也就應運而生。

什麼是 Responsive Web Design?
簡單來說,就是讓一個網頁在 PC、Mobile 上都可以有同樣的瀏覽效果與視覺體驗,而這個就可稱為 Responsive Web Design。

Responsive Web Design 的優缺點

優點:
    一,開發成本比兩套頁面設計低。
    毋庸置疑,因為可以直接用 Media Query 直接寫搭配行動裝置的 CSS ,當然與開發兩套不同網頁樣式的成本低。
    二,不需要重寫 HTML。
    RWD的精神就是不需要再維護另一份 HTML ,直接使用 CSS 屬性來對不同裝置做調整即可。
    三,可以針對許多不同裝置分別調整,利用 CSS3 的 Media Queries 方法就可輕易來實現 。

缺點:
    一,載入速度的問題。
    因為是使用同一份的 HTML & CSS ,所以不管是手機上或者 PC 上,要瀏覽的網頁都是同一份網頁,當然速度也是會一樣。在行動裝置上 Responsive Web Design 雖然看起來較桌面端瀏覽器簡單,但也只是把元素隱藏,事實上載入速度並不會變快。
   二, 在行動裝置上,需再多花心思做頁面的顯示設計。
    一個好的 Mobile User Experience 的話,就必須針對 Mobile 特別調整頁面的顯示。

實作簡介:

RWD最主要是透過HTML及CSS的設定來達到版型自動調整的功能。
一,HTML部份,允許網頁寬度自動調整。
      在網頁代碼的head,加入一行viewport的標籤。
       sample:
      < meta name=" viewport" content=" width=device-width, initial-scale=1" />
      viewport是網頁預設的寬度和高度,上面這行代碼的意思是,網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占螢幕面積的100%。
    所有主流瀏覽器都支持這個定義,包括IE9。對於那些老式瀏覽器(主要是IE6、7、8),可使用css3-mediaqueries.js來操作。
      可以使用下列語法來載入css3-mediaqueries.js
       < !--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" > </script>
  < ![endif]-->

二,CSS部份,透過 Media Query 偵測不同解析度大小,給予不同的 CSS 檔案做變化。


// 在 PC 上的顯示
.box {
    width: 800px;
}
// Media顯示
@media(max-width:640px) {
    .box {
        width: 100%;
    }
}
//上面的語法,也就是當寬度 < 767 px 時將載入下面後面的 CSS 。

三,不使用絕對寬度。

四,相對大小的字體
      顯示字體不使用絕對大小(px),而只能使用相對大小(em)。

五,流動布置(fluid grid)
      各個區塊的位置都是浮動的,不是固定不變的。

六,圖片的自動調整(fluid image)

Query 基本使用方法:
如果要非常熟練的運用 media,各種條件跟條件之間的查詢是不可或缺的。
像是 (min-width: 400px) and (max-width: 700px) ,「and」就是 Query 的一種。

Query 的語法只有三大項: not , and , only 。 較常用的是「and」。
而這三種查詢條件可以獨立存在,也可以同時存在,只要用「,」隔開即可。

留言

熱門文章