2013-03-12 5 views
3

부트 스트랩을 사용하여 데스크톱 및 모바일 버전의 앱을 만듭니다.부트 스트랩 : CSS 규칙을 데스크톱 버전에만 적용하십시오.

나는 거의 모든 다른 요소의 위치에 영향을 미치지 않습니다 워터 마크처럼, 데스크톱 버전은 왼쪽 상단 모서리에 작은 이미지를 갖고 싶어, 그래서 몸에 배경 이미지를 사용

body 
{ 
    background-image: url("../image/logo.png"); 
    background-repeat: no-repeat; 
} 

그러나 모바일 버전에 표시하고 싶지 않습니다.

모바일 버전에 영향을주는이 CSS 규칙을 어떻게 중지 할 수 있습니까?

답변

1

당신은 아마 body 태그에 클래스를 사용하는 것이 좋습니다 : 당신은 또한 작은 화면 크기 이미지를 제거 media queries를 사용할 수

body.desktop 
{ 
    background-image: url("../image/logo.png"); 
    background-repeat: no-repeat; 
} 

<body class="desktop"> 
... 
</body> 

. 이 경우 바디 클래스는 필요하지 않습니다.

@media only screen and (max-device-width: 480px) { 
    body {background-image: none;} 
} 
+1

여기에 클래스를 추천하는 이유조차 모르겠지만이 클래스를 어떻게 적용 할 것으로 예상됩니까? 미디어 쿼리를 사용할 때 전역 적으로 적용하지 않고'(min-width : X)'를 사용할 때 bg를 적용하고 사실 이후에 제거하는 것이 좋습니다. CSS가 적다. 'min-width'에 대해서'min-device-width'를 사용하는 것은 거의 드문 일입니다. ('max- * '에 대해서도 마찬가지입니다.) – cimmanon

+0

본인의 신체 검사 문제를 이해하지 못합니다. 미디어 쿼리에 관해서는 수정이 가능한 일반적인 예입니다. 언제든지 편집 할 수 있습니다. – isherwood

+2

여러분, 고마워요. '@ 미디어 전용 화면 및 (최소 너비 : 768px) { body {\t background-image : url ("../ image/logo.png"); background-repeat : no-repeat; } } ' – user2162295