RWD (Responsive Website Design) 響應式網頁設計小工具_Responsinator在電腦測試不同行動裝置效果

很久之前，建立一個網站，除了設計電腦版網站外，另外需要再設計手機版或平板用網站，這樣需要很多人力物力，一旦要維護更新網站，必需同時維護更新不同平台的版面。

響應式網站(RWD)會根據不同的螢幕尺寸調整顯示效果，自動放大縮小，方便在不同多媒體平台也能方便瀏覽，易於運用。

有一個viewpoint 的概念，就是在電腦viewpoint可任意調教大小，

但手機一眼看去，就是正面一個viewpoint 。

一個常用的Code 是:

<meta name="viewpoint" content="width = device-width, initial-scale=1.0"> (即是100% 縮放) 

在網頁的開頭做這設定，字不會變得很小，因為是100% 縮放，所以通常網頁的開頭都會加上這一句。

今次介紹一個方法行動裝置測試網頁的工具Responsinator (連結按此) 

去到Responsinator的網頁後，打上想測試的網址。

例如我打了本站的網址，就可測試出iphone width 375px, iphone width: 734px. 

Andorid phone widthL 412px 等不同行動裝置的網頁效果。

如果我想設定螢幕大小在 370 – 400px 的設定: 

可參考CSS Media Query  設定:

<style>

 @media (min-width: 370px) and (max-width: 400px) {

  p {

 font-size: 24px;

  }

}

</style>

這樣就能設定iphone width 375px 這行動裝置顯示出來的網頁效果，字體大小為24px。

通常網頁有幾個不同尺寸的CSS Media Query ，設計時會試看效果，然後度身訂造。