在我的样式部分中找不到媒体查询答案

【问题标题】：Media query not found in my style section在我的样式部分中找不到媒体查询
【发布时间】：2015-11-18 16:43:33
【问题描述】：

我是否必须添加一些链接或文件才能使媒体查询正常工作。当我尝试在 .cshtml 文件中使用内联媒体查询时，我在“@media”下看到一条红线，上面写着“无法解析符号媒体”。这是在一个 asp.net mvc 项目中。当我将媒体查询移动到它自己的 .css 文件时，它工作正常。 ASP MVC 项目中是否不允许内联媒体查询？

【问题讨论】：

请给我们总代码而不是一张不完整的图片。 [html,css]
你在用什么浏览器？什么说“无法解析符号media”？
IE 11. 是的，当我将鼠标悬停在“@media”上时，它显示“无法解析符号”，我是否需要添加引用或其他内容才能使用媒体查询？？
@media media query and ASP.NET MVC razor syntax clash的可能重复

标签： asp.net-mvc css razor media-queries

【解决方案1】：

这就是解决它的方法。

 @@media only screen and (max-width:768px) {
   /* only size 'xs' and below */
   .searchResults {
     height: 100%;
   }

我添加了两个@符号。

【讨论】：

【解决方案2】：

你所做的是你没有指定媒体规则

你的代码应该是这样的

@media screen and (max-width: 300px) { ... }

已编辑：

在网页顶部的<head>标签中添加这行代码

<meta name="viewport" content="width=device-width, scale=1.0" />

然后在样式定义中：

@media screen and (max-width: 768px) { 
.searchFilter {
 height:100%;
              }
     }

【讨论】：

不！也许我没有正确解释我的问题。 VS找不到这个符号？所以当我在 IE 中运行它时，我收到此错误消息 The name 'media' does not exist in the current context
哦，这似乎是特定于浏览器的错误，它在其他浏览器中运行良好，对吧？
我的 head 标签中目前有“”
这段代码在IE以外的其他浏览器中运行正常吗？
不，这不是特定于浏览器的错误。此错误来自 IIS，而不是浏览器。不，它不适用于任何其他浏览器。

【解决方案3】：

我通过将媒体查询放入 .css 文件来使其工作。当它内联在 .cshtml 文件中时，它不起作用。代码如下

<style> 
html,body,.container-fluid,.row {
  height: 100%;
}
.row > div {
  height: 100%;
}
.row .col-md-5 {
  background-color: #eee;
  top: 51px;
  /*border: 1px solid black;*/
  height: calc(100% - 51px);
  padding-left: 0;
  padding-right: 0;
}
.row .col-md-7 {
  background-color: #ddd;
  top: 51px;
  /*border: 1px solid black;*/
  height: calc(100% - 51px);
  padding-left: 0;
  padding-right: 0;
}
#googleResultMap {
  width: 100%;
  height: 100%;
  /*border: 1px solid black;*/
}
.searchFilter {
  /*width:200px;*/
  height: 20%;
  border: 1px solid blue;
}
.searchResults {
  height: 80%;
  border: 1px solid green;
  overflow-y: scroll
}
input[readonly].default-cursor {
  cursor: default;
}
@media only screen and (max-width : 768px) { // does not work
/* only size 'xs' and below */
.searchResults {
    height: 100%;
}
}
</style> 
<link href="~/Content/MediaQueries.css" rel="stylesheet" /> //works

【讨论】：