WordPress元素或响应媒体查询

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。