｜Day 28｜製作網頁你不能不知道的 RWD - PART 2 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 28

自我挑戰組

｜Day 28｜製作網頁你不能不知道的 RWD - PART 2

11th鐵人賽

1195 瀏覽

Media queries 要讓網頁的畫面可以在不同的裝置上使用而不跑版，最常用的是瀏覽器的寬度。

在開發前，可以先跟客戶或是工程師確認最後要的驗收的尺寸是什麼，避免不同裝置上出現跑版問題，導致驗收進度失誤。

【小工具提供】

想知道自己的瀏覽器的長寬比例嗎？
https://www.whatismyscreenresolution.com
WINDOW RESIZER─ 模擬各種螢幕尺寸，RWD必備的擴充套件
https://www.webdesigns.com.tw/window-resizer.asp

【重點小整理】
昨天提到第一步驟在<head> </head> 內設定meta viewpoint標籤。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

註明 initial-scale=1 都能確保網頁能完整運用螢幕寬度。

而再來設定 media queries。

@media only screen and (max-width: 768px) {
  p {
    font-size: 20px;
  }
}

特別要記得在 CSS 中，大型元素使用「相對」寬度，避免使用「絕對」寬度。

還記得我們之前曾說過，使用者體驗一直都是 Google 所在意的。
而以下幾點，則有利於 SEO，更有助於在 Google 上的網站排名，當排名相對前面的時候，就會更有助於使用者搜尋。

使用 meta name=”viewport” 標記，讓瀏覽器知道這個網站已經能夠符合各個裝置使用。
RWD 響應式網站上線後，使用 Google 行動裝置相容性測試，檢驗 Googlebot 是否能正確解讀，並且預防有不小心擋掉 Googlebot 的狀況。
使用響應式圖片技術（Responsive Images）。除了可依據裝置寬度，調整圖片比例之外，在高解析度裝置上，也可給予高解析度圖片。另外，也可以結合 CSS 的 @media 篩選功能，對於不同裝置寬度，給予適合的圖片檔案，避免圖片檔案過大。
因為把 RWD 寫在同一套 CSS 上，就只有同一個連結(link)，不需要再分電腦版及手機版的，當跳出率減少、可用性提高、分享次數增加，隨之而來的就是增加流量及停留時間，自然會提高搜尋排名。