编写媒体查询时出错答案

【问题标题】：error while writing media query编写媒体查询时出错
【发布时间】：2016-12-08 22:18:21
【问题描述】：

我在我的项目中使用Scala 和playFramework，在我的html 页面中编写媒体查询时遇到了一些问题。

这是我的代码

@(mailContent: String)
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Mail template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
        .img-brand {
            margin-left:20px; width:40%; height:40%;
        }
        .date { 
            font-size:125%; color:#5d5d5d; float:right; margin-right:20px; margin-top:55px;
        }
        @media (max-width:480px){
            .img-brand { margin-left:10px; width:90%; height:90%;}
            .date { font-size:125%; color:#5d5d5d; float:right; margin-right:20px; margin-top:10px;}
        }
    </style>
</head>

如果你看到我们正在使用 @ 创建一些变量，所以如果我写一些类似媒体的查询，它会给我错误

谁能帮我在不使用@的情况下编写媒体查询

我认为media Query 是唯一的问题，它通过添加@@ 得到解决，但现在我发现style 本身没有被使用或调用。那么，有人可以帮我解决这个问题吗？

【问题讨论】：

标签： html css scala playframework

【解决方案1】：

您必须转义 @ 字符：Play 模板使用它。所以当你写@media时，Play会尝试找到一个名为media的变量，这很可能会失败。逃避使用@@:

@(mailContent: String)
<p>Hi</p>
<style>
@@media (max-width:480px){
    // (...)
}
</style>

注意两点：

如果您将代码单独放在一个 .css 文件中并在 html 中添加一个链接，则不会出现此问题（Play 不会处理它）
可能您的 IDE 会抱怨 @@ 不是有效的 CSS。在 Play 处理之后，@@media 变成了@media，所以你可以忽略它。

【讨论】：

顺便说一句，我还有一个问题。我认为媒体查询引起了问题，但风格本身并没有得到认可。我删除了媒体查询，但风格仍然没有得到认可，你能帮我吗，谢谢你的回答
@raja 用您现在遇到的问题更新您的问题。如果它与原始问题完全不同，最好提出一个新问题......