WordPress Elementor响应媒体查询

Question

我在CSS中有一些元素，我使用媒体查询来表示屏幕大小。当在桌面上改变浏览器的大小时，查询执行它们应该执行的操作。当使用Elementor中的手机、平板电脑和桌面按钮以及WordPress自定义按钮时，这些按钮不会起作用。他们似乎没有通过最大宽度/最小宽度来测量平板电脑模式。我的代码有什么问题，这些“模式”是如何建立的？

主要问题是“WordPress/Elementor使用哪些属性来确定您处于哪种模式？”

/* design elements with breakpoints - default for desktop */
/* elements included - top menu */
/* markup for desktop */

.top_menu_list{
        list-style-type: none;
        float: right; 
        margin-right: 40px;  
    }

    li{
        float: left;
    }

    .top_menu_list a{
        display: block;
        padding: 40px 20px;
        font-size: 25px;
        font-weight: bold;
    }

/* markup for tablets */
@media screen and (min-width:769px) and (max-width:1024px) {

    .top_menu_list{
        list-style-type: none;
        float: right; 
        margin-right: 40px;  
    }

    li{
        float: left;
    }

    .top_menu_list a{
        display: block;
        padding: 40px 20px;
        font-size: 20px;
        font-weight: bold;
    }
}

/* markup for mobile */
@media screen and (max-width:768px) {

    .top_menu_list{
        list-style-type: none;
        float: right; 
        margin-right: 25px;  
    }

    li{
        float: left;
    }   

    .top_menu_list a{
        display: block;
        padding: 40px 8px;
        font-size: 12px;
        font-weight: bold;
    }
}

Answer 1

我在这页上找到了答案。。https://github.com/elementor/elementor/issues/78

从上一个版本（0.8）开始，我们将使用以下两个主要断点：A.768px和更低的移动断点。B.平板电脑为1024px及以下。

我认为它涵盖了大多数设备。对于大多数用户，我们更愿意让它更简单。要进行更多自定义，您可以始终使用自定义CSS。