如何在Elementor中使用CSS媒体查询

如何在Elementor中使用CSS媒体查询

　　Elementor 旨在成为响应式页面构建器（意味着布局在所有屏幕尺寸上看起来都不错）。尽管 Elementor 确实包含 3 个响应式“断点”，但您可能仍会在复杂布局或带有侧边栏（较窄的内容区域）的帖子上遇到问题。

　　可以使用一种称为CSS Media Queries的特殊 CSS 功能解决大部分问题。

　　提示：还可以通过精确的 Elementor 断点来定位 CSS 规则（无需媒体查询）

　　推荐：如何将自定义CSS添加到WordPress网站

什么是media query媒体查询？

　　媒体查询是 CSS 的一项功能，它允许您将规则定位到特定的屏幕尺寸。媒体查询是响应式网页设计的重要组成部分。一个 html 元素可能会应用不同的样式，这取决于访问者屏幕或 Web 浏览器的宽度（以像素为单位）。

• 在较小的屏幕上显示或隐藏元素
• 根据屏幕大小（文本、按钮等）调整元素大小
• 将元素从部分宽度更改为全宽（例如列）。

　　媒体查询可以针对许多媒体类型，但对于 Elementor 布局，您最感兴趣的是屏幕查询，它可以根据以下内容针对 css 规则：屏幕宽度、高度、方向、纵横比或分辨率。媒体查询的基本语法是：

@media media-type and (media-feature: value) {
/* CSS rules to apply here */
}

　　在下面的示例中，我们的规则为所有 H2 标题提供 40 像素的字体大小（但前提是屏幕宽度至少为500 像素）。

@media screen and (min-width: 500px) {

    h2 {
        font-size: 40px;
    }
}

　　推荐：[最新版]YellowPencil插件免费下载WordPress可视化CSS样式编辑器插件

为什么在 Elementor 中使用媒体查询？

　　使用媒体查询来确保您的设计在每个屏幕尺寸下看起来都不错。媒体查询可以解决常见问题，例如：

• 列文本太窄并且在小屏幕上被压扁
• 文本对于屏幕尺寸来说太大或太小
• 调整屏幕大小时，元素会错位
• 元素超出内容容器边界
• 在移动设备上用触摸友好版本替换元素
• 修复在不同屏幕尺寸下看起来很尴尬的填充或边距

　　推荐：Elementor Container Widget容器小部件

如何在 Elementor 中使用媒体查询

　　1、在小屏幕上隐藏图像或小部件

@media screen and (max-width: 600px) {
    
    /* hide widget if screen 600px or smaller */
    
    .elementor-element.yourclass {
        display: none;
    }
}

　　2、小屏幕全宽栏

　　需要同时定位 Elementor Row 的 flexbox 属性以及列的宽度，将类名添加到包含列的 Elementor 内部部分。

@media screen and (max-width: 700px) {
    
    /* Full-width columns if screen 700px or less */
    
    .elementor-section.yourclass .elementor-row {
        flex-wrap: wrap;
    }

    .elementor-section.yourclass .elementor-column {
         width: 100%;
    }
}

　　推荐：如何将Elementor许可证转移到另一个域名

　　3、响应式字体大小

　　可以根据查看者浏览器的宽度设置字体大小，以 1 像素的增量缩放它，而无需设置单独的断点。但我们仍然希望使用媒体查询来有效地设置字体大小的最小/最大值。

　　将在任何 Elementor 页面上缩放正文字体，范围从 16 像素到 20 像素，具体取决于访问者浏览器的宽度。

* Scales default font size from 16px to 20px */

body .elementor {
  font-size: 16px;
}
@media screen and (min-width: 400px) {
  body .elementor {
    font-size: calc(16px + 4 * ((100vw - 400px) / 600));
  }
}
@media screen and (min-width: 1000px) {
  body .elementor {
    font-size: 20px;
  }
} 

　　4、按设备类型定位 CSS 规则

　　也可以在根本不使用媒体查询的情况下将 CSS 规则定位到特定的设备尺寸。这是通过 Elementor 添加到页面的 标记的数据属性实现的。

　　编写规则的方法如下：只需照常编写 CSS 规则，然后在前面添加数据属性选择器。像这样：

/* substitute the whichever device type you want to target (Mobile, Tablet, Desktop) */

body[data-elementor-device-mode="mobile"] .class-one .class-two {
    /*css rules go here */
}

　　推荐：如何给Elementor中的图像上添加文本

总结

　　以上是晓得博客为你介绍的如何在Elementor中使用CSS媒体查询的全部内容，移动可用性和响应式设计比以往任何时候都更加重要，希望对你的WordPress建站有所帮助，如有问题，欢迎联系我们。

　　推荐：Elementor页面构建器教程