[css] @ 미디어 미디어 쿼리 및 ASP.NET MVC 면도기 구문 충돌

Program / 글쓴이

Razor 뷰 엔진을 사용하여 ASP.NET MVC에서 실행되는 대규모 사이트가 있습니다.

전체 사이트의 모든 일반 스타일이 포함 된 기본 스타일 시트가 있습니다. 그러나 때때로 페이지의 특정 스타일 <head>이 있습니다. 일반적으로 한두 줄입니다.

CSS를 <head>엄격하게 분리 하지는 않지만 특히 해당 페이지에 특정한 한 두 줄의 경우 CSS를 선호하지 않습니다. 다른 파일을 첨부하거나 대역폭에 추가 할 필요가 없습니다.

페이지 특정 미디어 쿼리를에 넣고 싶은 인스턴스가 있지만 <head>미디어 쿼리가 @ 기호와 괄호 {}를 사용하기 때문에 면도기 구문과 충돌합니다.

@section cphPageHead{
     <style>
        /* PAGE SPECIFIC CSS */
        ...

        @media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
            {
               ... }
            }
    </style>
}

이 문제를 해결할 수있는 방법이 있습니까?

답변

이중 @@ 기호를 사용하십시오. @ 기호를 빠져 나와 클라이언트 측에서 @media를 올바르게 렌더링합니다.

답변

또한 @@를 두 번 입력 한 후 공백을 추가해야합니다.

 @@ media only screen and (max-width : 960px)

@@media 공간이 없었기 때문에 저에게는 효과가 없었습니다.

답변

나는 이것이 오래된 질문이라는 것을 알고 있지만 이것이 나를 위해 일한 유일한 해결책이다.

@section cphPageHead{
    <style type="text/css" media="screen and (max-width:959px)">
    </style>


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}

답변