RWD (Responsive Website Design) 響應式網頁設計小工具_Responsinator在電腦測試不同行動裝置效果
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 ,設計時會試看效果,然後度身訂造。
推薦看一下這兩篇文章 ~
回覆刪除新的 Blogger RWD佈景主題
版面配置 ~ 媒體查詢「RWD」
很好喔
刪除