RESPONSIVE

WEB

DESIGN

YEAST LIU

2014.1.20

OUTLINE

• What is “Responsive Web Design” ?

• Responsive Elements and Media

• Responsive Layout

• Using Responsive Layout

• Building Mobile-first Websites

OUTLINE

• What is “Responsive Web Design” ?

• Responsive Elements and Media

• Responsive Layout

• Using Responsive Layout

• Building Mobile-first Websites

WHAT IS

RESPONSIVE WEB DESIGN?

WHAT IS

RESPONSIVE

WEB

DESIGN?

看看這個網頁

在平版上的樣子

WHAT IS

RESPONSIVE

WEB DESIGN?

在手機上?

WHAT IS

RESPONSIVE WEB DESIGN?

• 讓一個網頁在任何平台上都有好的瀏覽效果

• 不需要重寫 HTML

• 可以針對不同裝置進行調整

OUTLINE

• What is “Responsive Web Design” ?

• Responsive Elements and Media

• Responsive Layout

• Using Responsive Layout

• Building Mobile-first Websites

RESIZING AN IMAGE USING

• Any Size?

用百分比取代直接定義大小。

div.img-wrap{

float: left;

width:100%;

}

img.responsive {

max-width: 100%;

height: auto;

}

%

RESIZING YOUR SITE USING

MEDIA QUERIES

RESIZING YOUR SITE USING

MEDIA QUERY

• 什麼是 Media Query？

偵測裝置的尺寸和方向，提供指定的 CSS 樣式

• 有兩種使用方法

• 在同一個 CSS 檔中，用 @media 判斷螢幕寬度，

載入相應的樣式

• 在 HTML 檔中定義不同大小對應的 External CSS 檔案

RESIZING YOUR SITE USING

MEDIA QUERY

• @media Query 螢幕大小

/* 當螢幕寬度介於 1280 px ~ 1025 px 時 */

@media screen and ( min-width:1025px )

and ( max-width: 1280px ) {

img.responsive {

/* 圖片寬度為 900 px */

width: 900px;

}

}

img.responsive {

height: auto; }

RESIZING YOUR SITE USING

MEDIA QUERY

• 也可以分成許多不同的 CSS 檔案

<link rel="stylesheet" type="text/css" href=“small.css"

media="screen and (max-width: 1024px)">

<link rel="stylesheet" type="text/css" href=“medium.css"

media="screen and (min-width: 1025px)

and (max-width: 1280px)">

<link rel="stylesheet" type="text/css" href=“large.css"

media="screen and (min-width: 1081px)">

RESIZING YOUR SITE USING

MEDIA QUERY

• 我們再看個例子

RESIZING YOUR SITE USING

MEDIA QUERY

• 這是怎麼做到的？

在 HTML 中定義大小清單，在 CSS 中決定輸出樣式

<div class="small-menu">

<form>

<select >

<option value=“blog.html”>Option1</option>

<option value="home.html">Option2</option>

<option value="tutorials.html">Option3</option>

</select>

<form> </div>

RESIZING YOUR SITE USING

MEDIA QUERY

• 這是怎麼做到的？

• 在 HTML 中定義大小清單，這是小清單的原始碼

<div class="small-menu">

<form>

<select >

<option value=“blog.html”>Option1</option>

<option value="home.html">Option2</option>

<option value="tutorials.html">Option3</option>

</select>

<form> </div>

RESIZING YOUR SITE USING

MEDIA QUERY

• 這是怎麼做到的？

• 在 CSS 中決定兩種清單該什麼時候在什麼位置出現

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

.small-menu {

display: inline;

}

/* 把大清單藏起來 */

.large-menu {

display: none;

} }

IT’S YOUR TURN!

• 用 Media Query 寫一隻簡單的網頁，讓它能跟著螢幕大小轉換不同樣式

• Note: 可能會用到的工具

Window Resizer

OUTLINE

• What is “Responsive Web Design” ?

• Responsive Elements and Media

• Responsive Layout

• Using Responsive Layout

• Building Mobile-first Websites

MIN AND MAX WIDTH

• 當視窗縮小到某種程度時，讓網頁區塊向下移，不被切掉

/* 設定 <article> 標籤的區域最大值 */

article {

width: 100%;

max-width: 1280px;

margin: 0 auto;

}

/* 當最大寬度小於 350 px 時，向左對齊 */

.float {

max-width: 350px;

float: left; }

CONTROL LAYOUT WITH

RELATIVE PADDING

• 利用相對位置的留白讓網頁看起來整齊

.content { /* 上右下左 */

padding:0 5% 0 5%;

/* padding: 0px 10px 0px 10px; (這是不好的寫法) */

}

aside {

padding:0 10% 0 20%

}

.comment {

padding:0 0 0 10% }

con-

tent

5% aside 20%

Comment

10%

RECALL: MEDIA QUERIES

• Adding a media query to CSS

• Creating a responsive width layout with media queries

• Changing image sizes with media queries

• Hiding an element with media queries

MORE FEATURES

• 裝置寬度

device-width | min-device-width | max-device-width

• 裝置高度

device-height | min-device-height | max-device-height

• 旋轉方向

orientation (value: portrait | landscape)

• 解析度

resolution | min-resolution | max-resolution

OUTLINE

• What is “Responsive Web Design” ?

• Responsive Elements and Media

• Responsive Layout

• Using Responsive Layout

• Building Mobile-first Websites

BOOTSTRAP

• Twitter Bootstrap

• 提供許多設計好的版面能讓使用者使用

• 設計了豐富現成的按鈕、表單

• 已經是 Responsive Website

<div class="row">

<div class="col-md-4">

.col-md-4

</div>

<div class="col-md-4 col-md-offset-4">

.col-md-4 .col-md-offset-4

</div>

</div>

OUTLINE

• What is “Responsive Web Design” ?

• Responsive Elements and Media

• Responsive Layout

• Using Responsive Layout

• Building Mobile-first Websites

MOBILE-FIRST WEBSITE

MOBILE-FIRST WEBSITE

• 為什麼要先先設計手機介面？

• 智慧型手機使用者用越多

• 讓人專注在網站真正重要的地方

• 可以結合手機許多的特殊功能

Ex. Geolocation, Touch Event

MOBILE-FIRST WEBSITE

• RWD Desktop Tablet Mobile

• Mobile First RWD Mobile Tablet Desktop

Q & A