欢迎访问晨星博客!
WordPress 7.1 将响应式布局的设置搬进了块编辑器本身,站长和开发者可以直接在后台为不同视口指定样式,而不必再手动编写媒体查询 CSS。
在块编辑器的 块检查面板(Block Inspector)里,背景、排版、间距等属性旁边出现了设备图标。点击图标后会展开针对 桌面、平板、手机 的独立输入框,分别填写数值即可实现响应式调整。比如在“背景”面板中打开 background.gradient 支持后,同样可以为每个设备单独选取渐变颜色或组合背景图,实现细粒度的视觉适配。

在 WordPress 5.x 及更早版本,想让某个块在移动端隐藏或改变间距,通常需要:
functions.php 中注册自定义 CSS。@media (max-width: 768px) { … })并手动写出对应的选择器。这种方式不仅增加了维护成本,还容易因为选择器冲突导致样式失效。7.1 把 gradient、textShadow、spacing 等属性直接暴露在块级面板,省去了手写媒体查询的环节,让设计师在编辑器中即可预览不同设备下的效果。
虽然块编辑器已经覆盖了大多数常见的响应式需求,但仍有以下场景需要自行编写 CSS:
theme.json 或自定义样式表中添加 CSS。在这些边界情况下,仍可使用 Simple Custom CSS and JS 等插件或在子主题的 style.css 中加入自定义规则,确保功能完整。


声明:原创文章请勿转载,如需转载请注明出处!