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

這篇文章寫於 2021 年,文中的工具與版本可能已經更新,實作時請以官方文件為準。

本文目錄
  1. 一鍵下載,無腦安裝
  2. 安裝 Browser extension 快速跳轉
  3. 他強大在哪裡?
  4. 可以用一個視窗瀏覽所有尺寸的網頁
  5. 在其中一個視窗滾動滑鼠時其他視窗也會同步移動
  6. 其他功能

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

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

一鍵下載,無腦安裝

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

一鍵下載,無腦安裝(圖 2)

安裝 Browser extension 快速跳轉

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

安裝 Browser extension 快速跳轉(圖 3)

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

他強大在哪裡?

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

他強大在哪裡?(圖 5)

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

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

其他功能

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

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

Talk

留言討論

留言載入中…