當網頁中透過媒體查詢的設定以支援響應式功能會與 Razor 語法衝突…
當網頁中透過媒體查詢的設定以支援響應式功能,通常必須撰寫類似以下的媒體查詢語法:
@media screen and (min-width:561px) {
.book-cover {
float: left;
width: 50%;
text-align:center;
}
…
}
這段語法一開始以 @ 符號為字首進行設定,由於 ASP.NET MVC 網頁的 Razor 語法亦是以 @ 符號作為語法辨識字元,如果這段媒體查詢設定寫在 .cshtml 網頁檔案中,就會造成不必要的衝突。
為了避免上述的情形,將其修改如下:
@@media screen and (min-width:561px) {
....
…
}
直接配置兩個連接的 @ 符號即可。