Question

我在我的项目中使用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本身没有被使用或调用。所以，有人可以帮我解决这个问题。

Answer 1

您必须转义@字符：Play模板使用它。因此，当您编写@media时，Play会尝试查找名为media的变量，该变量可能会失败。要逃避使用@@：

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

注意两件事：

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

编写媒体查询时出错

1 个答案: