4-1 RWD響應式網頁 v5

Size: px

Start display at page:

Download "4-1 RWD響應式網頁 v5"

夜娄
4 years ago
Views:

1 V5.0

2 關於 RWD 響應式網頁 Responsive Web Design 1 Responsive Web Design:RWD, 響應式 ( 回應式 ) 網頁設計 2 它是一組方法的集合, 讓網頁的內容適應使用者環境 3 結合 CSS3 的媒體查詢非固定網格配置與非固定圖像的結合, 可配合各種裝置思考版面配置方式 4 字體設置更更靈活有彈性 Viewport Sizes

3 為所有用戶設計最佳體驗 1 最夯的裝置可能隨時改變, 意味著網頁裝置非固定網格尺寸, 因此未來來也沒有所謂的標準瀏覽器視窗尺寸 2 行行動 WEB 瀏覽率已超越桌面WEB 瀏覽率 3 WEB 是唯一真正跨平台技術

4 RWD 基本概念念 Responsive Web Design 1 RWD 主要包含三種技術 : (1) CSS3 媒體查詢 (media query) (2) 非固定的版面配置 (3) 非固定的圖像和媒體 3 產生行行動 web 版面配置的步驟 : (1) 分析當前的配置及結構 (2) 識別需要改變的配置結構 (3) 根據行行動裝置配置有所不同的元素調整 CSS (4) 組織 CSS 並利利用媒體查詢選擇性的應用至不同裝置

5 AWD 自適應 / 適應式網頁設計 Adaptive Web Design Adaptive Web Design ( AWD 自適應 / 適應式網頁設計 ), 由伺服端判斷後因應不同裝置而傳回不同版本的網頁給瀏覽器顯示, 通常有比較低的頻寬, 流量量和性能等 ) 對網頁作出優化使用 javascript 中的 useragent 指令來來判斷使用者裝置 : <script> var WHAT = navigator.useragent; if(what.match( /Android iphone ipad/i )){ window.location="mobile/index.html"; } </script>

6 meta viewport viewport: 告訴瀏覽器, 目前裝置的寬度 ( 或高度 ), 以便便在縮放時有個基準根據 W3C 草案, 在 meta tag 中 viewport 有以下功能, 可設定裝置畫面的相關屬性寬度 - width: [ 數字 ] 或 device-width ( 自動適應各家裝置的寬度 ) // 可用 <meta name="viewport" content="width=1100"/> 改變預設 viewport 寬度 // 可用 <meta name="viewport" content="width=device-width"/> 將 viewport 設為設備寬度最小縮放比例例 - minimum-scale: 最小 0.25, 最大 5 // 數值必須為正值 // 初始最小值, 以最小為主高度 - height: [ 數字 ] 或 device-height ( 自動適應各家裝置的高度 ) 最大縮放比例例 - maximum-scale: 最小 0.25, 最大 5 // 初始最大值, 以最大值為主初始縮放比例例 - initial-scale: 最小 0.25, 最大 5 (initial-scale:1.0) // initial-scale=1: 螢幕的初始模式比例例為 1 允許使用者改變縮放比例例 - user-scalable: 1 或 0 (yes 或 no) // 手機端網頁呈現固定, 不希望使用者隨意縮放 < 常用設定 > <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

7 media 媒體查詢項目媒體查詢可用來來依據裝置特性套用樣式屬性結果 min-width 任何超過查詢中指定寬度的瀏覽器都會套用規則 max-width 任何未超過查詢中指定寬度的瀏覽器都會套用規則 min-height 任何超過查詢中指定高度的瀏覽器都會套用規則 max-height 任何未超過查詢中指定高度的瀏覽器都會套用規則 orientation: landscape 媒體查詢還可用於根據瀏覽器的方向更更改頁面的佈局您可以擁有一組僅在瀏覽器視窗寬度超過其高度時應用的 CSS 屬性, 即所謂的橫向方向規則

8 media 媒體查詢設定 / * 超小型設備 ( 手機,600px 及以下 )* only screen and (max-width:600px) { } / * 小型設備 ( 小型平板電腦和大型手機,600px 及以上 )* only screen and (min-width:600px) { } / * 小型設備 ( 小型平板電腦和大型手機,767px 及以下 )* only screen and (max-width:767px) { } / * 中型設備 ( 大型平板電腦,768px 及以上 )* only screen and (min-width:768px) { } / * 大型設備 ( 筆記型電腦 / 桌機,992px 及以上 )* only screen and (min-width:992px) { } / * 超大型設備 ( 大型筆記型電腦和桌機,1200px 及以上 )* only screen and (min-width:1200px) { } / * 當設備寬度 > 高度, 套用 {...} 中的 CSS 規則 * only screen and (orientation:landscape) { } / * 當設備寬度介於 600px 到 900px 之間, 套用 {...} 中的 CSS 規則 * screen and (max-width:900px) and (min-width:600px) { } / * 當設備寬度介於 600px 和 900px 之間或低於 1100px 時, 套用 {...} 中的 CSS 規則 * screen and (max-width:900px) and (min-width:600px), (min-width:1100px) { } // 規則 :

9 RWD 常用 CSS 適合用來來依據裝置特性套用的樣式 / * 不累加邊框與內距的寬度 * / box-sizing: border-box; / * 調整背景圖像的大小以覆蓋整個容器 * / background-size: cover; /* 即使它必須拉伸圖像或從其中一個邊緣切掉一點任何超過查詢中指定高度的瀏覽器都會套用規則 */ / * 調整背景圖像的定位置中於整個容器 * / background-position: center center;

10 Q&A THANK YOU!

Chapter V.S. PC

Chapter V.S. PC Chapter 14 14-1 V.S. PC 14-2 14-3 14-4 14-1 V.S. PC PC PC Yahoo! PC (https://tw.yahoo.com/) Yahoo! (https:// tw.mobi.yahoo.com/) Yahoo! a b a PC b PC PC Flash HTML5 CSS3 PC 14-2 14-3 PC PC Yahoo! PC https://tw.yahoo.com/