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

214

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>
}

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

— 손수건
소스

3

여전히 css stylesCSS 파일에 있어야 한다고 생각 합니다. 특히 페이지의 "큰 사이트"에 대한 선형 CSS는 모범 사례가 아닙니다. 추신 : 내 의견

— AlexC

@AlexC에 동의하지만 유효한 유스 케이스에 관심이있는 사람들은 중요한 CSS가 외부보다 인라인으로 빠르게로드됩니다. 매우 빠른 첫 번째 의미있는 페인트를 사용하는 사이트에는 매우 유용한 트릭입니다.

— John Pavek

3

또 다른 사용 사례는 이메일을 렌더링하는 것입니다

— Jan Zahradník

477

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

— Archil
소스

27

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

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

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

— 샤 라비 아니
소스

2

압축 CSS를 사용할 때 이와 비슷한 문제가있었습니다. @@은 텍스트로 둘러싸여있어 Razor는이를 해석하기 위해 고심했습니다. @@ 앞에 공백을 추가하기로 결정했습니다. 팁 고마워.

— Anthony

1

공간이 있어도 이것은 효과가 없었습니다. 두 가지 요소를 가진 Daut의 대답 은 효과가있었습니다style !

— CPHPython

7

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

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


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

— Daut
소스