Responsively — 前端工程師必備 RWD 神器,在一個視窗瀏覽所有尺寸的網頁

林鼎淵
Dean Lin
Published in
Mar 19, 2021

--

對前端開發者來說 RWD 是一個惡夢,常常會有你修好了一個尺寸但忘記檢核不同尺寸在螢幕的適應性問題;今天跟大家分享一個超實用工具 — responsively,他的安裝極其簡單,而且還是免費的喔!

一鍵下載,無腦安裝

請依據自己的作業系統選擇安裝檔案,因為操作太過簡單就不贅述了,下載請點這裡

安裝 Browser extension 快速跳轉

在安裝的頁面中往下滑一點就會看到瀏覽器擴充套件,要先安裝程式後擴充套件才能用喔!這個套件會直接幫你跳轉到 App 上。

我是將『一律允許』打勾惹

他強大在哪裡?

這個程式打開後就是一個多視窗瀏覽器,直接『輸入網址』來檢視你想要瀏覽的頁面。

➤ 可以用一個視窗瀏覽所有尺寸的網頁

➤ 在其中一個視窗滾動滑鼠時其他視窗也會同步移動

➤ 其他功能

  • 支援熱更新:如果你在本地端開發前端網頁,只要按下儲存(crtl + s)就會更新嚕~
  • 修改程式的 Layout:水平(Horizontal)、區塊(FlexiGrid)、單獨(individual)
  • 螢幕截圖:可以一次性幫所有螢幕截圖,當然單個螢幕也行
  • 可以擴充 Devices 的螢幕種類:讓你可以自訂想在哪些 devices 上面瀏覽

這篇文章只是把官網的資訊稍微中文化而已,筆者心得:『這工具堪成前端神器!身為前端工程師看到這篇文還不安裝一波!』

▶︎ 如果這篇文章有幫助到你1. 可以點擊下方「Follow」來追蹤我~
2. 可以對文章拍手讓我知道 👏🏻
你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼▶︎ 如果你對工程師的職涯感到迷茫1. 也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
2. 也歡迎您到書局選購支持,透過豐富的案例來重新檢視自己的職涯

--

--

林鼎淵
Dean Lin

職涯中培育過多名工程師,🧰 目前在外商公司擔任 Software Specialist |✍️ 我專注寫 (1)最新技術 (2)團隊合作 (3)工程師職涯的文章,出版過 5 本專業書籍|👏🏻 如果對這些主題感興趣,歡迎點擊「Follow」來關注我~