V5.0
關於 RWD 響應式網 頁 Responsive Web Design 1 Responsive Web Design:RWD, 響應式 ( 回應式 ) 網 頁設計 2 它是 一組 方法的集合, 讓網 頁的內容適應使 用者環境 3 結合 CSS3 的媒體查詢 非固定網格配置與非固定圖像的結合, 可配合各種裝置思考版 面配置 方式 4 字體設置更更靈活有彈性 Viewport Sizes
為所有 用 戶設計最佳體驗 1 最夯的裝置可能隨時改變, 意味著網 頁裝置非固定網格尺 寸, 因此未來來也沒有所謂的標準瀏覽器視窗尺 寸 2 行行動 WEB 瀏覽率已超越桌 面WEB 瀏覽率 3 WEB 是唯 一真正跨平台技術
RWD 基本概念念 Responsive Web Design 1 RWD 主要包含三種技術 : (1) CSS3 媒體查詢 (media query) (2) 非固定的版 面配置 (3) 非固定的圖像和媒體 3 產 生 行行動 web 版 面配置的步驟 : (1) 分析當前的配置及結構 (2) 識別需要改變的配置結構 (3) 根據 行行動裝置配置有所不同的元素調整 CSS (4) 組織 CSS 並利利 用媒體查詢選擇性的應 用 至不同裝置
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>
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">
media 媒體查詢項 目媒體查詢可 用來來依據裝置特性套 用樣式 屬性 結果 min-width 任何超過查詢中指定寬度的瀏覽器都會套 用規則 max-width 任何未超過查詢中指定寬度的瀏覽器都會套 用規則 min-height 任何超過查詢中指定 高度的瀏覽器都會套 用規則 max-height 任何未超過查詢中指定 高度的瀏覽器都會套 用規則 orientation: landscape 媒體查詢還可 用於根據瀏覽器的 方向更更改 頁 面的佈局 您可以擁有 一組僅在瀏覽器視窗寬度超過其 高度時應 用的 CSS 屬性, 即所謂的 橫向 方向 CSS @media 規則
media 媒體查詢設定 / * 超 小型設備 ( 手機,600px 及以下 )* / @media only screen and (max-width:600px) { } / * 小型設備 ( 小型平板電腦和 大型 手機,600px 及以上 )* / @media only screen and (min-width:600px) { } / * 小型設備 ( 小型平板電腦和 大型 手機,767px 及以下 )* / @media only screen and (max-width:767px) { } / * 中型設備 ( 大型平板電腦,768px 及以上 )* / @media only screen and (min-width:768px) { } / * 大型設備 ( 筆記型電腦 / 桌機,992px 及以上 )* / @media only screen and (min-width:992px) { } / * 超 大型設備 ( 大型筆記型電腦和桌機,1200px 及以上 )* / @media only screen and (min-width:1200px) { } / * 當設備寬度 > 高度, 套 用 {...} 中的 CSS 規則 * / @media only screen and (orientation:landscape) { } / * 當設備寬度介於 600px 到 900px 之間, 套 用 {...} 中的 CSS 規則 * / @media screen and (max-width:900px) and (min-width:600px) { } / * 當設備寬度介於 600px 和 900px 之間或低於 1100px 時, 套 用 {...} 中的 CSS 規則 * / @media screen and (max-width:900px) and (min-width:600px), (min-width:1100px) { } // CSS @media 規則 :https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
RWD 常 用 CSS 適合 用來來依據裝置特性套 用的樣式 / * 不累加邊框與內距的寬度 * / box-sizing: border-box; / * 調整背景圖像的 大 小以覆蓋整個容器 * / background-size: cover; /* 即使它必須拉伸圖像或從其中 一個邊緣切掉 一點任何超過查詢中指定 高度的瀏覽器都會套 用規則 */ / * 調整背景圖像的定位置中於整個容器 * / background-position: center center;
Q&A THANK YOU!