狠狠撸

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

More Related Content

Responsive Web Design