Question

大家好，我在asp.net MVC CSHTML页面中使用媒体查询，但是它不能正常工作，没有显示我的代码没有帮助的元素

  @@media (min-width: 320px) and (max-width: 480px) {
       .MenSection{
       height: 600px;
                width: 460px;

     }
         #menuicon{
           display:table;
       }
     .trMobile{
         display:table;
     }

 #AboutDetails{
    margin-top:8px;
    margin-left:5px;
    padding-left:5px;
      padding-top:1px;

      display:list-item;

}
  #SocialLogin{
      width:auto;
  }
 .AboutDetailsHed{

    font-size:18px;

        margin-left:5px;
        }


    }

此处AboutDetailsHed，SocialLogin，AboutDetails正常运行，以上三个均无法正常运行，请帮助我

Answer 1

由于语法正确，我们很难确定如何为您提供帮助。因此，这是一种调试问题的简单方法。

由于将媒体查询添加到您的上下文中，因此您需要查看为什么未将某些内容应用于您的元素。

假设您使用的是Google Chrome浏览器进行调试（模拟移动设备）

在开发工具（F12）的“元素”窗格中导航到您的元素。转到您的元素，然后查看该元素的样式。您应该看到所有应用的样式。您在媒体查询中设置的样式可能被另一种样式覆盖。

在这种情况下，您需要确保稍后在上下文中添加媒体查询。也许将!important附加到样式属性的值中。

Answer 2

您是否尝试过将响应式元标记添加到html文档中？

<meta name="viewport" content="width=device-width, initial-scale=1">

如何使用媒体查询显示任何类别的元素

2 个答案: