編寫媒體查詢時出錯

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中添加鏈接，則不會出現此問題（播放不會對其進行處理）
您的IDE可能會抱怨@@不是有效的CSS。 Play處理@media之后， @@media變為@media ，因此您可以忽略它。

編寫媒體查詢時出錯

問題描述

1 個解決方案

解決方案1
3 已采納 2016-08-03 15:56:30

編寫媒體查詢時出錯

問題描述

1 個解決方案

解決方案1 3 已采納 2016-08-03 15:56:30

解決方案1
3 已采納 2016-08-03 15:56:30