メディアクエリを書き込んでいるときにエラーが発生しました

私のプロジェクトでScalaとplayFrameworkを使用していて、htmlページにメディアクエリを書き込んでいるときに問題があります。ここでメディアクエリを書き込んでいるときにエラーが発生しました

uは私はそのメディアのようないくつかのクエリを記述する場合いくつかのいずれかが私を助けることができるそれは私に

をエラーを与えているように、我々はいくつかの変数を作成するために@を使用して表示されている場合、私のコード

@(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そのものではないことがわかりました使用されるか、呼び出されます。だから、誰かがこれについて私を助けることができます。

出典

2016-08-03 raja

@文字をエスケープする必要があります。これはPlayテンプレートで使用されています。したがって、@mediaと書くと、Playはおそらく失敗するmediaという名前の変数を見つけようとします。脱出するために使用する@@：

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

注二つのこと：あなたは離れて.cssファイルにコードを配置し、HTMLにリンクを追加する場合は、この問題は発生しません

（文句を言わない再生それを処理してください）
おそらくあなたのIDEは@@が有効なCSSではないと不平を言うでしょう。再生処理後、@@mediaは@mediaになりますので無視してください。

出典

2016-08-03 15:56:30 Salem

ところでもう1つ問題があります。私はメディアクエリが問題を引き起こしていると思ったが、スタイル自体は認識されていない。私はメディアクエリーを削除しましたが、まだスタイルが認識されていないのですが、上記の回答に感謝してくれます。 – raja

@rajaあなたの質問をあなたの今の問題に更新してください。それが元の質問とはまったく異なるものなら、新しい質問をする方がいいかもしれません... – Salem

メディアクエリを書き込んでいるときにエラーが発生しました

答えて

関連する問題