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. 768像素及以下移动设备。 B.平板电脑为1024px及以下。

我认为它涵盖了大多数设备。对于大多数用户，我们希望使其更简单。要进行更多自定义，您可以随时使用自定义CSS。

WordPress Elementor响应式媒体查询

1 个答案: