WordPress Elementor 响应式媒体查询

Question

我在 CSS 中有某些元素，我使用媒体查询来表示屏幕尺寸。 当在桌面上改变浏览器的大小时，查询会做他们应该做的事情。 在 Elementor 以及 WordPress Customize 中使用移动设备、平板电脑和桌面设备的按钮时，这些按钮没有反应。 他们似乎没有通过最大宽度/最小宽度来衡量平板电脑模式。 我的代码有什么问题，这些“模式”是如何建立的？

主要问题是“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。