[指南] Responsively.app 前端工程师必备的 RWD 一个画面全览工具

章节连结

若是身为一个前端网页设计师,常会遇上的困境就是得开多个萤幕才能一口气看到各种不同萤幕宽度下,画面会不会跑版。今天这套 Responsively.app 专门用来解决这个问题,让你在一个视窗画面中观看各个萤幕尺寸下的画面状态。
responsively-app


如何安装

1. 进入官方网站后,点选中央的 Download Now
2.一般情况下,会自动开始下载。如果没有的话,你可以自行点选。
responsively-app download

使用方法

1. 一开始画面会默认加载 5 种装置大小,分别是 iPhone 6/7/8 Plus, X, iPad, Laptop 和自由缩放模式。你可以在上方的网址列输入网站,就可以直接进行预览了。若你是在本地端开发,那就是输入 localhost:<port number> 即可。
responsively-app settings2.你可以点选 customised,来选择其他的萤幕尺寸
responsively-app options
3.若有需要自订萤幕尺寸,也可以在此自行新增
responsively-app add form4.你可以决定你的萤幕尺寸预览要如何排序,分别用 Horizontal (水平排列)、FlexiGrid 和 Individual (每种独立显示)
responsively-app demo2 responsively-app flexigrid responsively-app individual

按赞加入粉丝团

延伸阅读

GA瀏覽人氣:18