问题 #900✓ 已解决提出于 2018年2月26日作者 chthomos3 个反应

对所有媒体查询应用样式

快速解答作者 chthomos3

我找到了先让它移动端的办法,暂时解决了我的问题: 设置编辑器 config.mediaCondition: 'min-width' 以及在deviceManager上:[ {姓名:“移动肖像”,宽度:'320px',宽度媒体:'0px'} {名称:“平板”,宽度:'568px',widthMedia:'320px'}, {名称:“桌面”,宽度:'568px',宽度媒体:'768px'}, ]

阅读下方完整回答 ↓

问题

再次恭喜你做得很棒。我们有大量扩展的Grapes,几乎加入了所有需要的功能。

我们计划用它来做移动端首页。所以我们已经把设备管理器设置成默认为“移动竖屏”。样式通过类完成,我们也扩展了所有组件,在画布上添加时创建新类。这很适合我们,到目前为止效果很好。

然而,当类别样式被更改时,只有 @media 的媒体查询(最大宽度:480px)会被更改。因此,用户可能需要对其他媒体查询(或主CSS)重复同样的更改。我们该如何控制这种行为?我们能否定义哪些样式属性是在非媒体查询的CSS上设置的,哪些是在媒体查询的CSS上设置的?

或者如果这很复杂,我们能先让CSS移动化吗?比如:改变断点,使CSS形成如下

  • 非媒体查询 css
  • @media(最小宽度:481像素)
  • @media(最小宽度:993像素)

这样,“主CSS”就能为移动端设置,覆盖可以在平板和移动端完成

再次感谢!

回答(2)

👍 最有帮助chthomos2018年3月1日

我找到了先让它移动端的办法,暂时解决了我的问题:

设置编辑器 config.mediaCondition: 'min-width'

以及在deviceManager上:[ {姓名:“移动肖像”,宽度:'320px',宽度媒体:'0px'} {名称:“平板”,宽度:'568px',widthMedia:'320px'}, {名称:“桌面”,宽度:'568px',宽度媒体:'768px'}, ]

lock[bot]2019年9月18日

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

相关问答

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

问题 #1506

CSS 媒体查询问题

你好@artf 演示页面和媒体查询库中都存在问题。 问题是,如果用户先在移动视图上更新样式,再用标签视图,再用媒体查询,移动视图就不起作用。如果我们先更新桌面样式,再更新标签页,再更新移动端,那么一切都正常 但如果我们先反向移动视图,标签视图第二,桌面视图第三,然后CSS/媒体...

3 个回答更新于 2020年5月21日

问题 #1888

在画布内添加自定义HTML

你好, 我用 Grapes 导出一个包含所有信息的自定义 json,而不是用 HTML 和 CSS。 为此,我解析存储在localStorage上的gpjs组件。 现在我需要自定义组件在Canvas中的渲染方式。 举个例子,我有一个输入组件,包含两个特征(标签和值),我想在画布...

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

问题 #1753

StyleManager - SectorsView - addToCollection() 使用“name”属性构建 ID,但因多个空格或特殊字符而失败

你好@artf, 利用grapesjs.init()方法中的pluginOpts属性,我通过Newsletter插件自定义了样式管理器中显示的扇区,如下: “''js Grapesjs.init({ [...] 插件:['gjs-plugin-ckeditor', 'gjs-b...

3 个回答更新于 2020年1月27日

问题 #890

:我无法让这个简单的例子正常工作

我对JavaScript并不陌生,但当我尝试这个例子时: 我得到的是一张空白页。 这还包括加入CSS和Javascript库。 有什么建议能让它顺利运行吗? 看起来是个出色的项目!

3 个回答更新于 2019年12月26日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

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