响应式包 — GrapesJS 的高级设备与断点管理器

默认的GrapesJS设备切换器会告诉你 编辑的宽度。它不会告诉你 断点处有什么东西会坏。

在手机上设置字体大小。在平板上加个边距。两小时后，你回到桌面，疑惑标题为何看起来不对——却无法轻松判断是哪种响应覆盖导致的。

响应式包 用一个完整的响应式工作流程取代了原厂的GrapesJS设备管理器，专为真实编辑打造。

你得到了什么

🔴 响应式覆盖指示器

准确查看所选组件具有断点特定样式的位置。

每台设备旁边的小指示显示某个组件是否存在响应式覆盖——这样你无需翻查CSS就能立即发现移动端、平板或桌面端的变更。

📱 并排响应式预览

同时预览多个设备。

通过同步滚动对比移动 端、平板和桌面 端。快速捕捉：

• 破损布局

• 意外间距

• 字体变更

• 溢出问题

• 元素在错误的断点出现或消失

不再需要一个个地切换设备。

⚙️ 完整断点编辑器

完全掌控你的响应式设备。

添加、重命名、重新排序或删除设备并配置：

• 宽度

• 高度

• min-width

• max-width

• 设备ID

• 设备名称

更改直接写入 editor.Devices，保持插件与 GrapesJS 设备系统完全集成。

📐 设备预设

从现实世界中流行的屏幕尺寸开始。

包含以下预设：

• iPhone

• iPad

• MacBook

• 常见的安卓设备

• 自定义设备尺寸

每当项目需要时，用自己的设备扩展预设列表。

🖥️ 设备帧与方向

让响应式预览感觉像是在测试真实设备。

可以在设备框架内预览页面，在 竖屏和横屏之间切换，并通过拖曳控制自由调整画布大小。

为Real GrapesJS项目打造

响应式包对于为 非技术用户构建基于GrapesJS的编辑器的团队尤其有用。

因为用户不可避免地会：

在手机上换个风格，然后忘了它。

响应式包不再强迫用户理解媒体查询和CSS继承，而是让响应式样式 可视化、易懂且易于调试。

这也适合那些花了一个下午搜索生成CSS却发现只有一个断点覆盖导致了整个问题的开发者。

为什么选择响应式资料包？

葡萄原料JS：
选择一个设备→编辑→交换设备→猜猜发生了什么变化。

响应式背包：
查看断点→识别覆盖→比较设备→解决问题。

响应式设计不应该需要翻找CSS。

兼容性

• 葡萄约翰逊： 0.19 – 0.23

• 可与原生 GrapesJS 设备管理器配合使用

• 响应式风格仍然是 GrapesJS 的标准样式

• 没有专有断点系统

买一次。继续更新。

一次购买包含所有未来的更新。

为开发者和团队开发，发布生产级响应式 GrapesJS 编辑器。