ASP.NET MVC 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) {
            ....
            
}


直接配置兩個連接的 @ 符號即可。

沒有留言: