古腾堡移动/平板电脑/桌面预览如何处理媒体查询?

时间:2021-04-13 作者:Siddharth Thevaril

我正在为手机和桌面构建一个具有不同布局的块。据我所知,CSS媒体查询在调整视口大小时会起作用。

enter image description here

古腾堡中的预览功能实际上并没有调整视口的大小,它只是缩小了包含块的容器的宽度。

我看到核心古腾堡区块;“画廊”;在桌面和移动预览模式之间切换时更改其布局。我想知道这是怎么回事?我检查了源代码,甚至检查了开发工具以检测CSS类的任何添加/删除,但找不到任何添加/删除。

有人能帮我照一下吗?

1 个回复
最合适的回答,由SO网友:Siddharth Thevaril 整理而成

我研究了使用React-Dev工具设置的状态,发现预览模式是在deviceType 钥匙通过古腾堡的源头发现了__experimentalGetPreviewDeviceType 作用

/**
 * Returns the current deviceType.
 */
const { deviceType } = useSelect( select => {
    const { __experimentalGetPreviewDeviceType } = select( \'core/edit-post\' );

    return {
        deviceType: __experimentalGetPreviewDeviceType(),
    }
}, [] );
我用它来有条件地设置CSS类。为我工作,我希望画廊街区也这样做。

相关推荐