RWD 網頁設計好用工具 - Responsively.app

筆者最近在練習使用 Tailwind CSS 寫 RWD 網頁(自適應網頁設計),也就是讓網頁在不同尺寸的裝置上顯示不同的樣式,方便各尺寸裝置使用最舒適的方式閱讀/操作。
但是因為筆者是 CSS 新手,寫起來很痛苦,每修改一次後就要重新將網頁拖曳手動調整大小確認是否和想像中的一樣,一直做重複的動作有點繁瑣又浪費時間,有沒有辦法同時看到各螢幕尺寸的畫面?

找了半天,筆者發現 Responsive 這款開源免費的前端神器,能夠展示不同尺寸的畫面,在輸入時會自動所有畫面同步輸入,媽媽再也不用擔心我要一直左右拖曳視窗了

這個是下載連結

安裝好後開啟就是一個拆分成很多畫面的瀏覽器:

使用 Ctrl + R 就可以全部重新整理,輸入時會自動全部一起輸入,但是總是會有部分功能不支援,這時候就可以點選 Disable Event Mirroring 來單獨使用這個畫面。



參考資料:
GitHub - responsively-org/responsively-app

留言

張貼留言

如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com