歡迎轉載(註明出處)或直接轉貼網址也ok,但是請不要直接把內容摳走貼在別的地方~

想跳過廢話前言的可以直接點下面的連結到相關主題

0. 前言

1. RWD 介紹

2. 使用純 CSS 開發 RWD 網頁

2.1. Media Queries 與撰寫習慣

2.2. Fluid Grid

2.3. Fluid / Flexible Image

3. 使用 Bootstrap 開發 RWD 網頁

3.1. Fluid Grids

3.2. Fluid / Flexible Image

4. RWD / CSS 網頁開發小技巧

4.1.DIV 內容垂直置中

4.2.Box-Sizing 的使用,避免 padding、border 造成額外寬度引起的破版

4.3.圓形圖片的問題

4.4.使用 Javascript 下 Media Queries 語法

4.5.圖片模糊的處理方式

4.6.使用 Reset CSS 重置各瀏覽器預設的標籤樣式

4.7.關於 CSS 的 display

4.8.分界點

5. Mobile First (行動裝置優先)

6. 其他資源

 

 

廢話且很長的前言 : 

最近公司為了推行動版網站,有想要把現行網頁改成 RWD 設計方式的念頭

因為這樣就不用維護兩個網站邏輯了,能減少一些開發成本,但一開始規劃版面需要點時間

因為必須要根據電腦、平板、手機三種尺寸去做版面設計

雖然很久以前就知道響應式網站的設計方式與原理,但是一直都沒有機會嘗試

因為一直都在寫電腦版!

而且對行動版的觀感不是很好,雖然我 n 年前也在寫 WML跟XHTML (差很多)

以下對行動版網站想法可能比較負面 (慎入)

=====================================================

其實說實在的,我就算用手機瀏覽網頁,還是會手動切換到電腦版網站

因為平常已經習慣電腦版的網頁配置了,一來改成手機版必須要重新去適應與培養操作習慣

二來有些手機版會拿掉一些可能不太重要的東西,但對我來說是重要的資訊

舉例來說, PChome 手機版商品頁的商品介紹只有這樣.....

 擷取  

但電腦版是這樣 (抱歉商品介紹實在太長,只好縮圖)

 x  

可以理解站方為了節省大家手機的流量而適度刪減了內容.....

但如果今天你真的是來買東西的,你會想看哪個版本??

雖然本大爺對花錢不太手軟,但畢竟還是會想要看看商品完整資訊才決定要不要下手啊

再舉一個例子,假設我在打電動happy的時候遇到困難,因此來到了巴哈姆特

以下這是手機版

請告訴我要怎麼找到惡靈古堡Bio6 的討論 @@ 我點開左上 + 右上的功能表都沒看到

 Clipboard03  

以下是電腦版網站,我可以在頁籤上切換各個系列作的討論,BIO6看完我還可以看一下啟示系列咧

這在手機版我真的無法找到....偏偏我每次用手機進來都把我導到手機版

Clipboard02    

建立手機版的目的是要讓人快速找到想要的資料,並且提供最舒適的瀏覽,不是要折磨使用者的

功能適應性問題還可以用時間來訓練使用者 (如果他真的需要你的資訊)

相對來說找不到想要的資訊反而比較嚴重....

因為大部分會用手機開網頁應該都是在急需資訊的時候,或是急著想要購買某樣東西想查規格

你回想一下上次打開手機的瀏覽器是為了要幹嘛? 查資料應該佔了多數

以上講的不包含在FB看到點開連結的那種網頁瀏覽,因為使用者在點選前就知道網站會提供這些資料了

例如FB文章連結標題寫馬雲,點進去不會是一片浮雲

找不到資料,可能會讓客戶覺得你本來就沒資料就跳走了 (如果是購物型網站,除非你東西便宜很多)

在此之前,使用者已被行動版折磨浪費了不少時間,偏偏你這時候又自以為貼心的把客戶導到行動版網頁

如果綜合以上的問題後想一想......你為什麼要花時間做行動版,來折磨客戶並考驗其忠誠度?

這東西就像雙面刃,做得好就可以幫助使用者,做不好就在考驗使用者的EQ

既然要做當然是要想辦法避開上面這些問題

1. 在有限度下(網速流量限制) 盡可能提供重要的內容,自己網站上什麼內容比較重要可以去做調查

2. 正常網站有的功能連結不要全拿掉或是考慮重新設計入口,以免折磨老客戶最後還是切到電腦版

3. 提供電腦版與行動版的切換功能

如果以上三點都有完全做到,我就會覺得瀏覽行動版網頁是可以接受的,反之...不要逼我使用

但其實這篇文章使在講怎麼開發的

因為畢竟我是開發者 = =

所以很抱歉上面那些真的是廢文

然後正文開始....

=====================================================

                    終於要開始了的分隔線

=====================================================

以下都是邊開發邊做功課的心得,所以有錯請指正一下囉

Responsive Web Design 這個名詞由 2010年 Ethan Marcotte 這個人提出

文章 : http://alistapart.com/article/responsive-web-design/

結論中提到 Fluid GridsFluid /Flexible ImageMedia Queries 是進行 RWD 時最重要的三項技術

1. 流動的區塊 (可隨著螢幕大小折行)

2. 靈活有彈性的圖片 (可隨著螢幕大小比例伸縮)

3. 使用CSS3 Media Queries (依照不同尺寸裝置給予相對應的呈現) 

 

要做到上面這三項,所需要的技術其實就是 HTML + CSS (或許加一些 js)

因此以下分成兩種方式來描述該怎麼做,並且為了方便從 media queries 開始介紹

一種是用單純的 CSS 慢慢刻,並且著重於一些開發時的小技巧

一種是用現在大家都喜歡用的 Bootstrap 這個 framework 來做

(但小地方還是免不了要自己寫 media queries)

 

 一、用純 CSS 開發 RWD 網頁

首先不管你要用純 CSS 還是 CSS framework 開發,都要先加一下這一行

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

加這一行的目的是要強迫網頁的內容,以裝置目前的寬度來做呈現

以下示範加與不加的效果

假設有一張圖在電腦版上看到是這樣 (下圖)

擷取

如果不加下面這行

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

直接用手機瀏覽 (模擬iphone 6),就會變這樣.....擺明了把自己當桌上型

擷取  

加了剛剛那行之後就會變成這樣

擷取  

關於 ViewPort 的一些說明可以參考一下這個

https://developers.google.com/speed/docs/insights/ConfigureViewport

 

再來要說明的是之前提到達成 RWD 三項技術之一的 CSS Media Queries

1. CSS Media Queries

它可以讓我們做到在不同尺寸的裝置中,呈現不同的效果

相關屬性可以參考這裡 : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

或是 W3C : http://www.w3.org/TR/css3-mediaqueries/

先看以下的例子

@media screen and (max-width: 480px) {

// 如果使用者視窗寬度 <= 480px,將字體大小變為 16px

.div1 {

 font-size: 16px;

}

}

@media screen and (max-width: 768px) {

// 如果使用者視窗寬度 <= 768px,將字體大小變為 20px

.div1 {

 font-size: 20px;

}

}

@media screen and (min-width: 768px) and (max-width: 992px) {

// 如果使用者視窗寬度介於 768px ~ 992px,將字體大小變為 30px

.div1 {

 font-size: 30px;

}

}

@media screen and (min-width: 1200px) {

// 如果使用者視窗寬度 >= 1200px,將字體大小變為 40px

.div1 {

 font-size: 40px;

}

}

看完範例,再來仔細的認識一下 media queries 的語法

自行參考 : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CSS Syntax

@media not|only mediatype and (media feature) {
    CSS-Code;
}

阿鬼講中文的話,就是以下這樣子

@media 媒體類型 and (條件)  {

.css {

/*  CSS  Code  */

}

}

其中的媒體類型有以下這些

也可以參考 W3C : http://www.w3.org/TR/CSS21/media.html#media-types

Media Types

Value Description
all 全部
print 印表機
braille 點字機
screen 視窗螢幕大小
handheld 行動裝置
tv 電視
projection 投影機

最常用的是 all (全部)、print (列印的時候)、screen (在螢幕上看的時候)

media 可下的條件有很多,以下截取比較常用的

Media Features

Value Description
device-height 裝置高度
device-width 裝置寬度
width 視窗寬度
height 視窗高度
max-device-height 最大裝置高度
max-device-width 最大裝置寬度
max-height 最大高度
max-width 最大寬度
min-device-width 最小裝置寬度
min-device-height 最小裝置高度
min-height 最小高度
min-width 最小寬度
orientation 裝置方向,可設定 portrait (直向) or landscape (橫向)

看完語法後回顧一下上面的範例

關於 AND

@media screen and (max-width: 768px) {

.div1 {

 font-size: 20px;

}

}

指的就是....如果使用者的視窗螢幕寬度"最大"沒有超過768px的話,就執行區塊內的 CSS

小於等於 768px 的意思

關於 OR 

也可以用 OR,中間用逗號區隔,如下範例

@media screen and (max-width: 600px), screen and (min-width: 800px) {

div { background: red; }

}

阿鬼說中文 : 符合視窗大小在600px(含)以下,或800px(含)以上

關於 Not

not 用來排除符合表達式的設備尺寸 (不一定尺寸啦,要看選用的 media features)

@media not screen and (max-width: 600px) {

div { background: red; }

}

關於 Only

@media only screen and (min-width:480px) {

div { background: red; }

}

阿鬼說中文 : 

media queries 是 CSS3 對於 media type 的一個擴展

所以不支援 media queries 的瀏覽器還是要能識別 media type

only是用來針對那些不支援 media queries 卻需要讀取 media type的設備隱藏樣式用的

 

撰寫的習慣

熟悉 media queries 語法後就可以來針對裝置尺寸來做不同的樣式效果

但在寫作之前,先說明開發的習慣很重要

在開發時為了避免 CSS 寫的超累贅,共用的部分最好跟 media queries 分開

不要在 media queries 裡面再寫一遍

然後 CSS 基本上用"蓋"的,效果後蓋前

所以可以把預設的 CSS 寫在最上方,如果沒跑到 media queries 就會自動套用

有進去 media queries 就會套用 media queries 設定

例如下的 css : 

/* 共用 + 預設部分 */

body {

padding:3px;

}

span {

color:blue;

}

/* media queries  部分 */

@media screen and (min-width: 480px) {

span {

color:red;

}

}

 

2. Fluid Grids 

介紹完 RWD 三項技術之一的 media queries 之後,第二個要說明的是Fluid Grid 的寫法

Fluid Grid 是由兩種技術組合而成

一種是將網頁元素以方格式設計 (Grid Design),另一種是依照視窗大小縮放的流動佈局 (Liquid Layout)

首先介紹第一種 Grid Design

a. Grid Design

這常用在一般網頁 div 排版的,寫法大致上有兩種

可以利用 float: left 或 float:right 或是 display: inline-block; 來做到

方法一 : float

以下的範例用float 將 div 由左至右排序

可以用滑鼠拖曳將區塊縮小看看效果

#list div {

width:80px;

/* 主要就下面這行 */

float:left;

}

原理就是利用 float : left ,將元素浮動靠左排列,反之用 float : right 就靠右排列

當超過容器最大寬度 (如 body), div 就會自動擠到下一行去了

上面的 demo 可以用滑鼠拖曳區塊感受一下

 

方法二 : display: inline-block

除了 float 之外也可以用 display: inline-block; 做到由左向右排列

如下的範例

只要把原本的 float : left 換成 display: inline-block,就可獲得一樣的效果

同時也可以透過指定 text-align 來達到靠左或靠右

那到底要用哪一種呢?

float 跟 display: inline-block 各有優缺點

float 寬度不足的話,區塊會自動往下掉就可能會與其他元素重疊

不過可以用 clear 來消除 float 的效果避免重疊

display: inline-block 就沒有這個問題

但是運作方式會比較像文字,像靠右靠左都是用 text-align: left | right

但基本上區塊的"順序"還是會由左到右的呈現

 

2016 update 方法三:

你現在又多了一個選擇使用 Flexbox layout,抱歉這兩年前的技術,但我最近才學會使用 XD

其實也是之前瀏覽器支援度不高啦! 使用方式請看下面這篇:

CSS Flexbox Layout 學習心得筆記

製作RWD越來越多人使用 Flexbox Layout了,但其實三種方法都可以做到

 

b.Liquid Layout

第二種做到 Fluid Grid 的技術是 Liquid Layout (流動佈局)

主要就是把原本用 px 單位製作的版面改成用 %

如下 : 

div {

width:360px;

/* 改成下面 */

width:35.15625%;

}

但在剛開始設計版面的時候用百分比來製作會有點難度

所以可以先用固定尺寸 (px) 來製作,規畫完版面後再轉換成相對比例 (%)

書上有找到相對應的公式可以參考一下

子元素占比 (%) = 欲變更元素的固定值 / 父元素的固定值 x 100

舉例來說 : 

假設要變更的子元素寬度是 800px (如 div),整個版面是用1024px 固定寬度去設計的

那360px 換算成百分比後的寬度就為

360 / 1024 x 100 = 35.15625%

 

除了各子元素可以這樣換算之外,padding 跟 margin 也可以用這個方法來換算

例如 : 

padding: 8px; 換算成百分比

8px / 1024 x 100 = 0.78125%

padding: 0.78125%;

 

3.Fluid Image

再來是 RWD 三項要素中的最後一項 fluid image (流動圖片)

流動式圖片也一樣,主要把原本的 px 單位換成 %,然後達到依畫面尺寸縮放的功能

但相對於 Liquid Layout,流動圖片要注意的地方比較多一點~

因為還要考慮圖片放大後失真 or 可能會有想要針對螢幕大小指定合適圖片的需求 

然後針對上面的第一點圖片失真問題,文章最後會補充幾種處理方式

在 RWD 顯示圖片的方式有兩種,一種是傳統 img 標籤,一種就是用 CSS 的背景圖了

一般圖片 img 標籤,將 width 或 height 設 % 就可以了,另一個設為 auto

如下面 : 

#banner {

width: 100%;

height: auto;

}

也可以用 max-width : 60% 之類的方式防止圖片大到糊掉

 

第二種是針對容器(如 div)使用背景圖片

#banner {

width: 100%;

height: 100px;

background-repeat: no-repeat;

background-size: 100% auto;

background-image: url('banner.jpg');

}

用背景圖的方式可彌補  img  無法針對螢幕大小指定合適圖片的缺點 (無法下 media queries)

但是會因為要做到等比縮放,可能面臨被截圖的問題 (因為父容器的高固定了)

background-size 這個 CSS3 的新屬性可以設定背景圖片的大小

原先沒指定的話就是 auto,auto 指的就是原圖的大小

一般可以使用 cover 讓背景圖填滿容器

底下列出網路上找到 background-size 用法,上面範例用的是第三種 percentage

設定值 說明
auto 預設值,維持背景圖片原本的大小。
length 自訂背景圖片的大小,可以用兩個數字表示,先是設定寬度,再來是設定高度,不可為負數,如果只寫一個數字,第二個數字則會自動設為 auto 的效果,背景圖片自動縮放。
percentage 自訂背景圖片的大小,用兩個數字百分比表示,第一個數字百分比是設定寬度,第二個數字百分比是設定高度,如果只寫一個,則第二個將自動設為 auto 的效果,背景圖片自動縮放。
cover 使用於背景圖片小於容器時,將背景圖片的大小放大至容器的大小並填滿,缺點是如果容器的長寬比例與背景圖片的長寬比例不吻合,會出現背景圖片失真的情況。
contain 使用於背景圖片大於容器時,將背景圖片縮小至可以在容器內呈現。

以上就是利用純 CSS 開發 RWD 網站的三種要素

當然在開發時還會遇到一些小問題與小技巧

最後再來補充說明

現在要進行的是說明如何用 Bootstrap 進行 RWD 網站的開發

 

二、用 Bootstrap 開發 RWD 網站

在開始之前首先要說明的是,雖然 Bootstrap 可以用比較簡單的方式做到 RWD

但是還是建議要了解基本的 CSS,要就要學 CSS 不要一開始就學 CSS framework

就像在學 jQuery 之前,還是要先會一些 Javascript 的道理一樣

當你 Javascript 寫久了也會大概知道 jQuery 是怎麼包裝的,Bootstrap 也一樣

用Bootstrap 的優點就是開發快速,而且他是Mobile First (這個觀念後面再來補充一下)

再來...他大概是目前市面上運用最廣的 CSS framework了吧

所以相對資源也很多 (包括theme)

以下開始教學,使用的是穩定版本 Bootstrap 3.x 

如要使用 Bootstrap 4 請參考 (僅支援IE10以上,且 windows safari 目前也不支援)

https://getbootstrap.com/docs/4.0/getting-started/introduction/

=====================================================

首先 bootstrap 的官網在此 http://getbootstrap.com/

4.0 還在 beta 且支援度有限,因此請看 3.x 的穩定版 https://getbootstrap.com/docs/3.3/

第一步就是先下載,或是直接引用他的 CDN 到頁面上 :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

然後再加上前面有提到的,不管你要用哪一種開發都要加的這一行

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

基本上就完成了前置作業,大家也可以點到 bootstrap 官網的 CSS 頁面上看教學

官網講得非常詳細,不過這邊再稍微屁一下混版面

 

以下開始屁

=====================================================

之前有提到要做到 RWD 的網站必須要有三個要素

Fluid GridsFluid /Flexible ImageMedia Queries

 

首先介紹是 Fluid Grids

在 bootstrap 的流動版面的容器設置方式如下

<div class="container-fluid">
  ...
</div>

這樣就會是寬度 100% 的狀態,但左右各會各有 padding 15px 

另外在 bootstrap 有一個製作 RWD 很重要的架構叫 Grid System

他主要是把整個頁面分成12等分的方格,每個方格都是用 % 來設置的,單位都是 em

如下圖的 .col-md-1 就代表一格,.col-md-2 就代表兩格,最大到 .col-md-12 (共12格)

擷取  

至於為何單位要用 em....主要就是 Content First 的概念

有興趣請看一下下面這個高手的文章

https://blog.hinablue.me/entry/css-media-query-use-pixel-or-not/

 

再來回到剛講的 Grid System,底下這堆 html 其實就是上面那張表,col-md-1 好死不死共12個

當然你也可以直接 col-md-12 塞滿一個 row

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

稍微簡化一下......簡單一點看,主要架構是這樣的

<div class="container-fluid">

<div class="row">

<div class="col-md-1">1</div>

<div class="col-md-1">1</div>

</div>

</div>

最外面使用 class="container-fluid" 做到流動版面的外框容器,可以想像成 html 的 <table width="100%>

然後裡層的 <div class="row"> 可以想像成以前 html 的 <tr>

一個 row 裡面會有多個 col-md-*,可以想像成多個 <td>

就這麼簡單.........

 

你可以針對不同裝置的尺寸給予不同的 .col- 方格,如下面已經中文化的表格所示

  超小屏幕 手機 (<768px) 小屏幕 平板 (≧768px) 中等屏幕 桌面顯示器 (≧992px) 大屏幕 大桌面顯示器 (≧1200px)
柵格系統行為 總是水平排列 開始是堆疊在一起的,當大於這些值時將變為水平排列
.container 最大寬度 None (自動) 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
列(column)數 12
最大列(column)寬 自動 ~62px ~81px ~97px
槽(gutter)寬 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

如果是用手機瀏覽的話(<768px),就可以下 .col-xs-1 ~ .col-xs-12 

如果是平板瀏覽的話 (>=768px),就可以下 .col-sm-1 ~ .col-sm-12

如果是一般電腦小顯示器 (>=992px),就可以下 .col-md-1 ~ .col-md-12

如果是一般大型顯示器 (>=1200px),就可以下 .col-lg-1 ~ .col-lg-12

所以當你的一個流動方格區塊要在不同裝置呈現不同效果時,只要類似下面這樣

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

如上面這段官方範例所示

當用手機瀏覽(<768)的時候就會變成框框這樣,因為 <768 只要看 col-xs-*就好了

其他 class 可以忽略,所以是 .col-xs-12 滿版

擷取  

而恢復到桌上型電腦的時候,同一段 code 就會變得如下圖

因為 >=992 所以此時是看 .col-md-8 + .col-md-4,結果如紅色框框

擷取  

而如果一個 row 裡面大於12格會發生什麼事呢?

擷取   

答案是會掉到下一行 

在 bootstrap 官網範例還說明了很多種關於 Grid System 的細部功能

如 :

1. 如果要清除響應使用 .clearfix

2. 如果想讓欄位偏移使用 .col-sm-offset-*

3. 使用 .col-md-push-* 做到將 col 排序

其他相關的範例官網說明得很清楚,可以自己去玩玩看

http://getbootstrap.com/css/

 一般而言 RWD 都是用 div 排版,如果你真的需要用到 table (如表格) 的話

可以在 html 的 <table> 標籤加上 .table 跟 .table-responsive 

這樣如果你的螢幕尺寸小於 768px 就會出現卷軸,如下圖

擷取  

綜合以上的這些介紹就是三要素之一的 Fluid Grids

---------------------------------------------------------

再來稍微提一下 Bootstrap 4.0 版本的 Grid System

在 Bootstrap 4.x 版本的 Grid System 是建立在 Flexbox Layout 之上

因此瀏覽器要求必須要在 IE10+,且 windows 的 Safari 目前不支援

上面提到的用法還是可以正常運作,但是有多了其他好用的屬性,有興趣可以參考這裡

https://getbootstrap.com/docs/4.0/layout/grid/

 

再來介紹是 RWD 三要素之二的 Fluid Images

Fluid Images

在 bootstrap 要做到 fluid images 只要加上 class="img-responsive" 即可

img-responsive 這個 class 的本質就是下面這幾個 CSS

max-width: 100%;

height: auto;

display: block; 

如果要讓 img-responsive 類的圖片置中可以使用 .center-block

 

圖片形狀

bootstrap 提供了三種簡單的方式讓圖片能有更好的外觀

.img-rounded、.img-circle、.img-thumbnail

如下圖的例子

擷取  

以上就是 bootstrap 關於 Fluid Images 的做法,其實就是多一個 .img-responsive 而已

 

Media Queries

再來的 media queries 上面用純 CSS 刻的時候已經有提到了,就跳過 

 

RWD 網頁開發小技巧

說明完了如何用純 CSS 跟 Bootstrap 開發 RWD 網站之後

底下就要來整理一下一些開發的小技巧,不管是用純 CSS 或是 Bootstrap 應該多少都會遇到

1. DIV 內容垂直置中

首先最常見的就是 div 內容的置中問題,雖然你可以決定 div 容器內容的靠左靠右

但是垂直置中這還真的有點麻煩.....

網路上解決方法還蠻多的,這邊挑兩種情況來說明一下怎麼解決

a. 使用 display:table 與 display:table-cell 

假設你今天有一個 div 如下 :

<div id="content">

test

</div>

頁面的 CSS 如下 :

#content {

width:30%;

height:200px;

border:1px solid #000000;

padding:5px;

text-align:center;

vertical-align:middle;

}

執行後的頁面會變得如下圖,vertical-align:middle 根本沒用 

擷取   

此時可以利用CSS 的 table-cell 來做

首先在原本的 id="content" 裡面再加個 div

<div id="content">

<div>

test

</div>

</div>

然後用 CSS 把外層的 div 加一個 display: table,裡層的 div 加上 display: table-cell 

然後就可以把他當 table 使用了....個人覺得這個方法比較簡單~

CSS 變成

#content {

width:30%;

height:200px;

border:1px solid #000000;

padding:5px;

text-align:center;

display:table;

}

#content div {

display: table-cell;

vertical-align:middle;

}

結果如下

 

b. 設定 position: absolute 後的置中與垂直置中方法

有時候為了排版需要所以使用了 position: absolute 去做了絕對定位

這時候可以透過下面的方法來做到垂直置中

將 position 設定為 absolute 的區塊加上 margin:auto;

如果要垂直置中就加上 top:0px; bottom:0px 即可

如果要水平置中就加上 left: 0px; right: 0px; 即可

(外層要加上 position: relative;)

可以參考下面的結果

 

c. 你現在又多了一個選擇,使用Flexbox Layout 來做垂直置中

假設 HTML 是這樣:

<div>
      test
</div>

CSS :

div {

    /* 只要下面兩行就寫完了 */

    display:flex;

    align-items:center;  

    justify-content:center;

    height:200px;

    border:1px solid #cccccc;

}

就會長的如下圖:

Flexbox Layout 其他好用的功能請看下面這篇

CSS Flexbox Layout 學習心得筆記

 

2. Box-Sizing 的使用

這在 RWD 可能要稍微注意一下,尤其要換算成 %單位的話

原本算好好的寬度就會因為多了 padding 跟 border 的寬度而破板了

實例是這樣的 : 

如果有一個 div 寬度是 200px,你設定了 padding :10px; border-width: 10px;

那其實整個 div 會變成 200 + 10 + 10 = 220px

因為預設是 content-box 寬度其實是加在整個 div 外面的~

現在可以用 CSS3 的 box-sizing 來解決每次都要計算總寬度的問題

box-sizing: 有三種屬性可以設定

content-box : 預設的,就是原本寬度 + padding + border-width (在外面多加一圈的意思)

padding-box : 還在實驗階段可以不用理他

border-box : 設定的寬跟高就是實際 div 的寬跟高 (padding + border-width 算在裡面的意思)

資料來源 : https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-sizing

所以現在你的 div 只要加下面這行就可以不用再管 padding、border 所造成的破版了

box-sizing: border-box;

 

3.圓形圖片的問題

上面有提到 bootstrap 可以透過簡單的 class 設定把圖片美化的功能

下面稍微複習一下

擷取  

套用第二種 img-circle 之後的效果如下

 擷取

如果可以善用這功能網站也會變得比較有設計感

然後現在要講的是第二種圓形圖所造成的問題,其實要做到這功能不見得要用 bootstrap 

只要 CSS 下一行即可

img {

/* border-radius 就是CSS3 的圓角*/

border-radius: 50%;

}

就會有如下的效果

擷取  

但不管用純 CSS 還是 Bootstrap,這個方式都有個致命性的缺點.... 

就是圖片必須要是正方形,就如同 bootstrap 的說明一樣要 140 x 140

但有時候總是事與願違.....如果是舊網站轉型成 RWD 也不可能完全圖都是正方形

如果圖不是正方形就會變成下面這樣

擷取  

這時候可以透過設定背景圖片的方式讓所有的圖都呈現圓形

雖然還是有小缺點,可能會被截到圖.......但你還是可以控制要顯示圖片的範圍

首先把原本的 <img src="" class="img-circle"> 換成 div,如下 :

<div id="circle">

<div></div>

</div>

CSS : 

#circle {

display: inline-block;

/* 設定外框的 div 為140 x 140 大小 */

width: 140px;

height:140px;

/* 並且將外框設定為圓形 */

border-radius: 50%; 

}
#circle div {

/* 設定背景圖片 */

background-image:url('http://socute.gear.host/images/demo1.jpg');

/*

background-size 可以參考前面的說明,這邊用的是 cover :

*/

background-size:cover;

/*

background-position 可以讓你決定背景圖的定位方式

background-position: 25% 50%; /* 水平 25% ,垂直 50% */

background-position: 50px 25px; /* 水平 50px ,垂直 25px */

background-position: center; /* 置中 */

background-position: bottom right; /* 右下 */

*/

background-position:center left;

height: 100%;

border-radius:50%;

}

原本橢圓形的圖就會變成如下的效果 : 

 

4. 用 Javascript 下 Media Queries 語法

這個東西對於 RWD 網頁來說其實還蠻需要的,如果你的圖片顯示幾乎都是背景圖的話

或是像上面圓形圖的例子一樣,你需要針對不同的圖片做到 background-position 靠左或靠右

用 js 處理就可以先判定圖片的寬高,再決定要將圖片靠左還是靠右了

可以到這邊來下載 js : http://wicky.nillia.ms/enquire.js/#downloads

使用方式可以參考官方網站,基本上跟在 CSS 裡面下 media queries 差不多

擷取  

詳細使用方式請參考官網 

 

 5. 圖片模糊的處理方式

之前有提到在做 Fluid Images 的時候,可能會遇到比較麻煩的問題就是圖片失真

可以用以下兩種方法來處理

1. 準備大兩倍尺寸的圖,但 img 的 width 跟 height 不變

2. 如果是背景圖,可以透過 image-set 這個 CSS or 下 media queries 來解決

下面這 CSS 的意思是在一倍大的裝置使用 icon1x.jpg

到了兩倍大的裝置使用 icon2x.jpg

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

但這個樣式目前只有在具有 -webkit 前置字元的 Chrome 和 Safari 提供支援

(所以記得要多一組預設的 CSS)

詳細可以看這邊的說明 : 使用 image-set 提供高解析度圖片

https://developers.google.com/web/fundamentals/media/images/images-in-css?hl=zh-tw

除了使用 image-set 也可使用 media queries 來換圖

 

6. 使用 Reset CSS 重置各瀏覽器預設的標籤樣式

每個瀏覽器對於不同的標籤都有自己的樣式,為了避免之後針對各瀏覽器調樣式到死

一開始最好先使用 Reset CSS 來重置樣式

Reset CSS 可以在下面的位置下載

http://html5doctor.com/html-5-reset-stylesheet/

 

7. 關於 CSS 的 display

一直以來都被 display 搞得很亂,因為屬性實在太多,所以下面會整理一下常用的

display 是 CSS 版面配置最重要的屬性,每個 HTML 都有一個預設的 display 屬性

預設值通常是 block 或 inline 其中一個

block 就代表區塊元素 ex: div,會換行、可以設定 padding、width

inline 就代表行內元素 ex: span,不會換行、無法設定

然後還有一個常用的是 none 常拿來隱藏元素用

目前完整的 display 有以下的屬性

參考 : https://developer.mozilla.org/en-US/docs/Web/CSS/display

none | inline | block | list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents

但要全部記起來會死人,而且也不太可能全都用的到,所以下面整理一下常用的

====================================================

display: inline-block 

外面是 inline 裡面是 block,外面的inline 不會換行 (像 span)

裡面的 block 則可以設定 padding、width、background-image...等參數 (像 div)

可以說是非常好用,但要注意 IE8 以下可能會有問題

 

display: inline-table

顯示為 table 物件,但前後皆不會換行

 

display: table 

定義為類似 table 的行為方式,是個 block 區塊故會換行

 

display: table-row

定義為類似 tr 的行為方式

 

display: table-cell 

定義為類似 td 的行為方式

以上三個可以拿來讓 div 垂直置中

 

display: flexbox

請看俺寫的這篇 CSS Flexbox Layout 學習心得筆記

 

8.分界點

分界點指的是裝置由一個尺寸變換到另一個尺寸時的變換點

如果分界點有三個,代表最少要有手機與平板版型,至於在何處分界~~

很多RWD 的網站分界點都是根據網站的類型與使用情況訂出來的

除了可以參考一下下圖裝置尺寸表 (很抱歉他原圖就這麼小)

資料來源在這裡 :

http://www.ibm.com/developerworks/cn/websphere/library/techarticles/1410_wangq_rwd/14110_wangq_rwd.html

img001   

也可以多參考同類型的網站,至於要怎麼知道同類型的網站分界點在哪?

你可以檢視原始檔看看他 CSS 裡的 media queries 怎麼下就會知道了

分界點必須在網站建置前就要決定,在網站建置完後才決定要多一點的話.....會很想死

然後也可以看一下這份如何選擇中斷點的說明 (中文) 寫得很不錯

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/how-to-choose-breakpoints?hl=zh-tw

擷取片段 : 

先從較小裝置開始選擇主要中斷點,之後再處理較大的裝置

先設計符合小螢幕的內容,接著將螢幕放大,等到畫面開始走樣時,再設置中斷點。

如此一來,您可以根據內容將中斷點最佳化,只需保留最少的中段點即可。

  

Mobile First (行動裝置優先)

接下來會繼續補充我這陣子摸索學到的,一些關於行動版網站開發時要注意的地方


"Mobile First" 我發現這個話題真的超紅的.....網路上隨便 google 都很多相關文章

Mobile First 是一個概念,他指的是在設計網站的時候要優先考量行動裝置

但這不是要你從手機網站開始設計起,而是過程中要以手機為主要考量

廣義來說, Mobile First 甚至包含了整個公司網站的營運策略

以上是書上講的....以下就來了解一下做完功課後的實際內容

 

這名詞是由一位叫做 Luke Wroblewski 所提出的,很抱歉我跟他不太熟,但我找了一下資料

他是一個知名的設計師與介面規劃師,當過美國yahoo架構設計負責人

他在 2010 年的時候進行了一次簡報,其標題就是 Mobile first 

以下資料是來自 inside 的這篇文章,有興趣可以點進去看看

http://www.inside.com.tw/2010/11/13/mobile-first

這邊也有進行簡報的影片檔與 PDF 

http://www.lukew.com/presos/preso.asp?26

 

在這份簡報裡,Luke Wroblewski 以三個原因來解釋為什麼手機必需優先:

1. 手機正在進行一次爆炸性成長

2. 手機逼迫你專注

3. 手機開展更多潛能

 

底下也列出這份簡報檔的重點標題,或是你可以點上面的文章進去看

1. 請開始思考,以手機為優先的網路產品(甚至是沒有準備規劃手機版服務)

2. Google 的程式設計師正以「手機應用程式優先」的概念工作。

3. Facebook開始在自己產品思考「手機優先,桌面次之」的概念。

4. Adobe認為,我們真的需要現在轉換去思考「打造手機(服務)優先」,這或許是一個較PC革命還大的轉變。

5. 手機優先的3大原因:成長 = 機會 ; 限制 = 專注 ; 潛力 = 創新 。

6. 未來行動上網潛力是爆炸的

7. 以AT&T的手機數據流量來看,在3年內成長了50倍。

8. 占全體使用者4%的iPhone yelp App使用者,占據了27%的搜尋量。

9. 減法的重要,專心在核心功能上。根據iPhone介面指南:「在iPhone應用程式裡,主要的功能應該要被立刻顯示,最小化使用者必需選擇操作的數量」

10. 把你的網站內化、簡化成適合手機的樣貌。

11. iPad介面設計指南:請不要將你因為iPhone限制而減少的功能,把他全部做回iPad上。

12. 不要輕視讀取速度所造成的流量與業績損傷,所有龍頭網站都已經証實這點。

 

然後 Luke Wrobllewski 也出了一本書叫 Mobile First

http://abookapart.com/products/mobile-first

我沒有買....但擷取中文化後的片段大意是這樣的~

要建構良好的行動裝置操作體驗,有以下幾點要注意 :

1. 要符合使用者使用行動裝置的方式與動機 (行動中手機查資料、躺在床上滑平板)

2. 明確的內容比設計齊全的導覽功能更重要 (我前言所舉的例子,因為行動版的簡化導致更重要內容被刪除)

3. 提供設計良好的導覽選單,方便使用者閒逛或深入閱讀內容 (前言所舉的例子,根本找不到攻略 翻桌) 

4. 頁面簡單、明確

5. 要符合行動裝置操作特性 

 

是的~~已經知道 Mobile first 多重要了!

但上面那幾點的範圍實在太大了,沒有一個準則可以讓我們去設計的時候有個明確方向

所以這樣的話可以參考參考 Apple 的 IOS 介面開發指南,或是參考一些已經遵循 Mobile First 的網站

Mobile First 的網站可以參考以下這些 

蘋果 : http://www.apple.com/tw/

mobilefirst.jp :  http://www.mobile-first.jp/   (這...是日文網站,但是是書裡面推薦的 = =)

微軟 : http://www.microsoft.com/zh-tw/default.aspx

 

再來 UI 的設計面如何友善? 以下幫大家找好了

Apple IOS 介面開發指南中文版 :

http://www.usabilitymax.com/wp-content/uploads/downloads/2011/11/iPhone-HIG.pdf

還有 Android User Interface Guidelines :

http://developer.android.com/design/index.html

http://www.apkbus.com/design/  (簡中)

 

然後擷取一些 Apple IOS 的介面開發指南片段來參考一下

1.第37頁的由上而下的佈局 : 

   資訊置於最明顯且最方便的頂部。

   當使用者從螢幕頂部瀏覽到底部的時候,呈現的資訊的過程應該是由一般到特殊,從高級到低級的過程。

2.第38頁有提到......如果有需要被點擊的UI元素,大小最好在 44 x 44 以上

3.第38頁,最大限度地減少所需的輸入

   (我覺得應該是根本就不要考慮輸入,除非是登入會員,因為實在太痛苦)

有興趣可以稍微讀一下這份文件

然後開發時也可以多利用 Javascript 在行動裝置上的事件

touchStart、touchMove.....等,做到上面講的第五點 "要符合行動裝置操作特性 "

 

其他資源

1. 所見及所得,用滑鼠拖拉產生 RWD 網站框架的工具

    http://www.lifeishao.com/rwdwire/

2. Google 開發者的文章

   https://developers.google.com/web/fundamentals/layouts/rwd-patterns/?hl=en

   https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/how-to-choose-breakpoints?hl=zh-tw

3. Google 的行動版檢測頁面

   https://search.google.com/test/mobile-friendly?hl=zh-tw

   https://developers.google.com/speed/pagespeed/insights/

   Google PageSpeed 的問題修正方式,可以參考我之前寫過的這篇

   使用 Google PageSpeed Insights 為行動網站進行效能調校 [優化網站速度與體驗]

4. 讓舊版 IE支援 HTML5

   https://github.com/afarkas/html5shiv

5. px、pt、em 的尺寸對照表 

    http://pxtoem.com/

 擷取  

 

 

其實資源很多,但這篇寫太久之後再陸續補充.....

這篇實在寫太久了有點累.....決定先發佈之後有空再補充

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(25) 人氣()


留言列表 (25)

發表留言
  • 悄悄話
  • 訪客
  • 好長的一篇文章,鵰兄太厲害了!!!!
  • 訪客
  • 很實用的文章~~
  • 希望有幫到你^^

    小雕 於 2015/11/18 20:56 回覆

  • eva
  • 很棒的文章!! 對於學習很有幫助~~謝謝您
  • 很高興能幫到你 ^^

    小雕 於 2015/12/17 15:52 回覆

  • TOMMY
  • 最近正在學習RWD 實在是焦頭爛額
    GOOGLE到這篇文章, 雖然學習之路很漫長
    但版主把重點統整歸納過, 讓學習上有一個方向
    很感謝!!!!!!

    有個問題不知可否詢問 關於版型?
    就是書上的介紹的版型,不管在哪個平台上,都是兩邊有留白
    如要設定head banner寬度是滿版, 下方section是兩邊距離大約30px
    這樣是要設定最外圍DIV 為width100% 還是怎麼做?

    如有空的話在回答, 很謝謝版主!!:D
  • hi你好啊,

    要滿版就width:100%就可以了,下方兩邊距離兩側約30px 就下padding就可以了 padding:0px 3px; or padding:0px 3px 0px 3px;

    ps:上面搞錯,突然想到是margin才對

    小雕 於 2016/01/11 15:55 回覆

  • 悄悄話
  • 龍蝦帝國
  • 謝謝分享! 很實用
  • 謝謝~~希望有幫到你^^

    小雕 於 2016/02/16 19:30 回覆

  • 偽日本人x歪嘴May
  • 您好
    因為調整部落格後,發現現在滿版的blog在手機上無法正常顯示
    查詢後發現您這篇文
    可以請問,要如何將部落格 頁面自動符合手機瀏覽器大小?
    請問語法要加在哪裡呢?
    因為完全自已摸索,對於語法是完全不懂
    先謝謝您
  • 偽日本人x歪嘴May
  • 請問是
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    全部都貼上去嗎? 不知是放在哪裡? 試了好幾次都不行呢
  • hi 是放在<head></head> 之間喔
    但你可能要先檢查一下你的部落格外層框架是否有設定寬度100%才會滿版的~

    ps: 抱歉留言不能直接接受html tag,所以我改了幾次留言 = =

    小雕 於 2016/02/18 09:09 回覆

  • 悄悄話
  • 悄悄話
  • 偽日本人x歪嘴May
  • 您好,謝謝您
    剛才我終於設定好了~
  • 不客氣~~其實沒幫上什麼忙^^"

    小雕 於 2016/02/20 15:55 回覆

  • 悄悄話
  • ConnieConnie Connie
  • 原來你已經默默的寫這麼多RWD啦~佩服!! (上一個留言可以刪掉,重複了~>////<)
  • 看到熟人啦!! 撒小花轉圈圈~ \^_^/

    小雕 於 2016/03/29 13:10 回覆

  • 澳航站長
  • 請教一下, 如果加了手機版RWD, 我還想提供一個電腦版的選項給客人, 可以用什麼程式來設定嗎? 我選讓客人選擇,但現在是手機一定會變成RWD版面(我個人也是比較喜歡看電腦版) 謝謝!!
  • 這就是我覺得 RWD 最討厭的缺點之一,你目前能做的只能另外生一個電腦版出來了,因為 RWD 是用css 判斷裝置尺寸,除非你的 media queries 是用 js 去下的,就可以動態決定要套用哪個樣式 (用我文章後面提到的 http://wicky.nillia.ms/enquire.js/#downloads),否則你裝置多大就會呈顯什麼版面

    目前要短時間內生出電腦版最快的方式可能是..(參考一下就好)
    將原頁面複製到另一個資料夾施工,把你目前的 RWD 樣式中media queries 小於多少的都拿掉,這樣就不會因為裝置尺寸過小而被 css 硬縮版面了

    小雕 於 2016/05/18 10:46 回覆

  • 澳航站長
  • 感謝您!
    我請前端工程師來試看看!
  • 22
  • 您好,因最近在學rwd技術,本身就有一點jsp css 的技術,
    剛剛看了您寫的內容,覺得真的很受用,
    但看完後我有一個想法不知是否正確,
    就是rwd是否只是把一般的網頁寫法改成全部用%的方式做設計而已呢?
    還是我太小看rwd了? XDDD
    另外就是我剛剛邊看您的文章邊試做一個新網頁
    但我發現我輸入了您的meta那段但是視窗大小不管怎麼改變似乎都沒有任何變化
    以及使用了media screen ....這段也沒有任何變化
    不知是我寫錯位置還是有需要import一些什麼資源呢?
    那兩段我都是寫在head標籤內
    media screen ... 我外層有加了stype的標籤
    懇請大大賜教。謝謝您。
  • hi 你好啊

    RWD 基本上容器都會是%的方式設定寬度
    比較困難的地方在於要先定義變換點的切換位置在哪
    還有當你用了 % 之後可能會造成的問題,例如圖片變糊了
    或是位置跑掉了....等這種細小但很明顯的問題

    然後第二個問題,下面這段是針對你的裝置寬度,不是針對視窗大小
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    所以你變換視窗大小是沒用的
    你可以打開你的chrome瀏覽器按F12
    開發者工具左邊算來第二個圖示可以模擬行動裝置
    要用那個看就會比較清楚

    然後media queries 不用import什麼東西,基本上ie9 以上就支援了
    如果沒有效果的話可能要看一下你是怎麼寫的
    方便的話可以貼上來我看一下~

    小雕 於 2016/08/01 13:27 回覆

  • 22
  • 謝謝大大的回應
    上面的問題目前已解決了
    可能是當初有拼錯字導致效果出不來 XDDD
  • vnslau
  • 請教一下, 目前要做一個求職網, 這網站有工作搜尋及職場專欄, "RWD" 或是 "電腦版+行動版網站" 比較好? loading time 會快點?
  • 你好啊!

    如果你只是講求速度與開發時間,在執行速度來說單純的行動版一定是比RWD快的,因為不會有多餘的css去檢查裝置尺寸,並依照裝置大小來呈現版面,所以邏輯會更簡單且執行更快速,且RWD在製作前也需要更多的時間去規劃

    但RWD的優點並不在執行速度與開發時間,相對的可能還是弱點,RWD的優點在於使用者經驗一致性,也可以減少使用者在熟悉你兩個網站操作的學習時間曲線

    小雕 於 2016/10/04 11:43 回覆

  • vnslau
  • 感謝你的回覆,我想再問一下關於SEO的問題,據了解Google指引, RWD版的SEO排名較為有優勢。請問行動手機版能有辨法解決或改善Google SEO排名弱勢這個問題嗎?
    行動版會否像Mobile App一樣需要時常更新?
  • 你好啊,

    因為google調整演算法的關係,行動裝置的友善度會列為排名條件之一,但是google沒有強制一定要使用RWD,只要能通過google的行動裝置檢測就可以了
    檢測網址:https://www.google.com/webmasters/tools/mobile-friendly/?hl=zh-tw

    使用RWD的優點則是入口統一、連結單一,意思就是不會像行動版跟電腦版一樣,同樣的內容會有兩個不同的連結,可能會造成評分下降
    在seo上行動版只有這個缺點,但是只要遵照google說明的去執行就不會有太大的問題
    詳細可以參考這篇:
    https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls?hl=zh-tw

    以下擷取內文片段
    =================================================
    電腦版和行動版網址的註解

    為協助我們的演算法瞭解獨立的行動網址,我們建議您使用 下列註解:

    在電腦版網頁上加入特殊的 link rel=”alternate” 標記, 指向對應的行動版網址,以便 Googlebot 找到您網站的 行動版網頁位置。
    在行動版網頁上加入 link rel=”canonical” 標記, 指向對應的電腦版網址。
    =================================================

    因此現階段來說....其實我不認為對SEO來說,單一的行動版會比RWD網頁差很多,但在開發上行動版會比RWD來的快很多


    不過最後google還是建議使用RWD就是了

    小雕 於 2016/10/05 10:08 回覆

  • vnslau
  • 謝謝您給了我很有用的意見 ^^
  • 不客氣~~^^
    有問題再互相討論

    小雕 於 2016/10/06 17:16 回覆

  • 酒店經紀阿妹
  • 好專業,我只看得懂前言,其他看不懂,哈哈哈。但是還是很感謝您的分享。
  • 不客氣,有遇到問題也可以互相討論~~^^

    小雕 於 2017/01/07 16:05 回覆

  • 悄悄話
  • 訪客
  • 非常感謝,您的文章對我幫助很大