https://blog.wu-boy.com/tags/google-extension/Recent content in Google Extension on 小惡魔 - AppleBOYHugoen-usappleboy.tw@gmail.com (Appleboy)appleboy.tw@gmail.com (Appleboy)Fri, 03 May 2013 03:21:45 +0000https://blog.wu-boy.com/2013/05/web-responsive-design-test-tool/Fri, 03 May 2013 03:21:45 +0000appleboy.tw@gmail.com (Appleboy)https://blog.wu-boy.com/2013/05/web-responsive-design-test-tool/<div style="margin:0 auto; text-align:center"> <a href="https://www.flickr.com/photos/appleboy/8703913582/" title="responsive-website-design-tips by appleboy46, on Flickr"><img src="https://i0.wp.com/farm9.staticflickr.com/8395/8703913582_1e15c97803.jpg?resize=500%2C294&#038;ssl=1" alt="responsive-website-design-tips" data-recalc-dims="1" /></a></a> </div> <p>Web CSS Programer 在撰寫 Responsive CSS Style 時，手邊一定會有一堆 Device，來測試當畫面小於 480 px 或大於 768 px 時，呈現的版面是否有亂掉，公司也花費許多成本來測試，現在不需要這樣了，我們可以透過線上 Tool 或者是 Plugin 來測試 Responsive Web Page，首先來介紹</p> <p><a href="http://lab.maltewassermann.com/viewport-resizer/" target="_blank">Viewport resizer</a>，此工具用法很簡單，進入官網後，將官網 Javascript 連結加入到我的最愛或 bookmarks，之後打開您的測試網站，再點選該 bookmark，你會發現網站上面多了一條 tool bar，可以自訂或調整 view size，預設也給了平板手機等多種畫面調整，讓您測試 <a href="https://developer.mozilla.org/en-US/docs/CSS/Media_queries" target="_blank">Media Queries</a> 是否有錯誤。</p>