namesilo最便宜的域名购买
如何在Elementor中使用CSS媒体查询

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

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

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

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

  可以使用一种称为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、响应式字体大小

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

  可以根据查看者浏览器的宽度设置字体大小,以 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页面构建器教程

给文章评分

晓得博客,版权所有丨如未注明,均为原创
晓得博客 » 如何在Elementor中使用CSS媒体查询

转载请保留链接:https://www.pythonthree.com/elementor-media-query/

ThemeForest 模板套件
可视化创建WordPress网站
Scroll to Top