问题 #2057💬 已回答提出于 2019年5月31日作者 alikabeer321 个反应

媒体查询不适用于我编写的自定义块

快速解答作者 alikabeer321

@alikabeer32我也遇到同样的问题。如果你解决了这个问题。你能在这里分享一下解决方案吗?谢谢 @umerrinayat我不记得我做了什么,但试试以下方法: 你需要定义 CSS 类并添加唯一的 ID “''js const cssComposer = 编辑器。Css作曲家; var SM = 编辑。选拔经理; var sel1 = sm.add('simple-div'); var rule = cssComposer.add([sel1]); 更新风格 rule.set('style', { 宽度:“100%”, 高度:“自动” “填充”:'80px 50px', 高度:“自动” float:“左”, }); 添加唯一ID...

阅读下方完整回答 ↓

问题

我写了一个简单的 div 块,就像这样 blockManager.add('simple-div', { 标签:“容器”, 内容:“<!––<div class=”simple-div“></div> ––>”“, 分类:“基础”, 属性:{ 标题:“简单盒子”, 类别:“FA方阵” } });

但它完全没有响应。情况是这样的:

  1. 我在桌面上把宽度设置为100%
  2. 我切换到平板,把宽度调成50%
  3. 我切回桌面,宽度依然是50% CSS 中也没有媒体查询 (媒体查询对图片正常使用)

我是不是漏掉了什么代码,能让它响应式?

编辑

我刚意识到,样式是针对元素本身,而不是唯一ID/职业 我用以下代码为该元素赋予了唯一 ID var comps = 编辑器。主导组件;

comps.addType('.simple-div', { 初始化:function() { this.set('attributes', { id: randomID() }); }, });

我该如何让样式不直接进入元素,而是内联样式表

回答(2)

alikabeer322019年12月6日

@alikabeer32我也遇到同样的问题。如果你解决了这个问题。你能在这里分享一下解决方案吗?谢谢 @umerrinayat我不记得我做了什么,但试试以下方法: 你需要定义 CSS 类并添加唯一的 ID “''js const cssComposer = 编辑器。Css作曲家; var SM = 编辑。选拔经理; var sel1 = sm.add('simple-div'); var rule = cssComposer.add([sel1]); 更新风格 rule.set('style', { 宽度:“100%”, 高度:“自动” “填充”:'80px 50px', 高度:“自动” f...

umerrinayat2019年12月6日

@alikabeer32我也遇到同样的问题。如果你解决了这个问题。你能在这里分享一下解决方案吗?谢谢

相关问答

通过相似的问题讨论继续研究。

问题 #2177

如何创建包含 HTML 和 CSS 和 JavaScript 内容的块。

有人能给我演示一下如何用JavaScript和CSS样式创建块的代码示例吗? “''js 编辑。BlockManager.add('a_block', { 标签:“Sample Block”, 内容: '<style> .sampleclass{ 填充:10像素 15像素; }...

3 个回答更新于 2021年3月17日

问题 #1959

在自定义按钮中编辑 innerHTML

大家好, 我正在尝试更改按钮组件中的文本,但无法编辑它。我添加了这个类型: 我添加了可编辑的真实参数,但不起作用 然后把按钮添加到组件管理器里 有什么办法可以绕过这个问题吗? 谢谢!

3 个回答更新于 2020年4月15日

问题 #459

在另一个模块中包含自定义组件时出现错误

抱歉标题有点模糊。我不太确定如何简洁地描述这件事。我有一个自定义块,想限制只有图片可以丢进块的某个部分。我尝试过类似这样的方法: 然而,当我这样做时,尝试将方块从方块调色板中拖出时,会出现以下错误: ... grapes.min.js:2 未捕获类型错误:s 不是构造函数 at...

3 个回答更新于 2019年9月18日

问题 #922

问题:为组件添加默认样式

我一直在努力将葡萄糖整合进我正在开发的一个新开发项目中。 我在文档和维基论坛上取得了很大成功,但遇到了一些问题,希望有人能帮我解决。 我只用移动端视图,默认设备设置为移动端,并关闭了更改选项。 当我插入图片时,我希望默认的CSS能包含最大宽度:100%,因为如果我在移动视图加载...

3 个回答更新于 2019年9月18日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

浏览插件分类

直接跳转到市场上的插件分类页面。