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