미디어 쿼리하지

Question

I가 다음과 같은 적은 코드 : 그런 다음

@mobile: ~'screen and (max-width: 480px)'; 

다음과 같이 내가 그것을 사용

@media @mobile { 
    // some code 
} 

그것은 잘 작동하지만, 나는 또한 사용하고 싶습니다 "없습니다"와 같은 :

@media not @mobile { 
    // some code 
} 

하지만 오류를 얻을

,

"not"부분.

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

Answer 1

어쩌면 당신이 뭔가를 할 수 있습니다 :

@notmobileWidth: @mobileWidth + 1px; 

하는 LESS 만들기 :

@mobileWidth: 480px; 

그런 다음 큰 아무것도 아닌 모바일 장치 :

는 모바일 장치의 폭을 정의 모바일 및 비 모바일 용 변수 :

@mobile: ~'screen and (max-width: @{mobileWidth})'; 
@notmobile: ~'screen and (min-width: @{notmobileWidth})'; 

그런 다음 미디어 쿼리에 사용하는 검색어를 사용하십시오.

@media @mobile { 
    // some mobile code 
} 

@media @notmobile { 
    // some not-mobile code 
}