Responsive Web Design

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

WHAT IS
RESPONSIVE WEB DESIGN?

WHAT IS
RESPONSIVE
WEB
DESIGN?

看看這個網頁
在平版上的樣子

WHAT IS
RESPONSIVE
WEB DESIGN?

在手機上?

WHAT IS
RESPONSIVE WEB DESIGN?
• 讓一個網頁在任何平台上都有好的瀏覽效果

• 不需要重寫 HTML
• 可以針對不同裝置進行調整

%

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


MEDIA QUERY
• 什麼是 Media Query？

偵測裝置的尺寸和方向，提供指定的 CSS 樣式
• 有兩種使用方法
• 在同一個 CSS 檔中，用 @media 判斷螢幕寬度，
載入相應的樣式
• 在 HTML 檔中定義不同大小對應的 External CSS 檔案


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;
}


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)">


MEDIA QUERY
• 我們再看個例子


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>


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>


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

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%
}

content
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

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>

MOBILE-FIRST WEBSITE
• 為什麼要先先設計手機介面？
• 智慧型手機使用者用越多
• 讓人專注在網站真正重要的地方
• 可以結合手機許多的特殊功能
Ex. Geolocation, Touch Event

MOBILE-FIRST WEBSITE
• RWD

Desktop  Tablet  Mobile

• Mobile First RWD

Mobile  Tablet  Desktop

Responsive Web Design

Recommandé

Recommandé

Contenu connexe

Similaire à Responsive Web Design

Similaire à Responsive Web Design (20)

Responsive Web Design