CSS를 사용하여 여백을 조건부로 조정하는 방법은 무엇입니까?

중간 및 위쪽 화면의 상단에 패딩이 조정 된 로고 jpeg가있는 곳에서 materialize CSS를 사용하고 있습니다. 모바일 화면의 경우 왼쪽 패딩을 조정해야합니다.CSS를 사용하여 여백을 조건부로 조정하는 방법은 무엇입니까?

매체

최대 나는이 CSS 스타일

#mylogo { 
    padding-top: 15px; 
}

및 HTML

<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo"> 
    <img src="images/logo.jpeg" id="mylogo" alt="Logo"> 
    My Logo 
    </a> 
</div>

내가 및 아래쪽 화면에 동일한 img 태그를 사용할 수 있습니다. 추가 또는 변경해야 할 내 CSS에서 패딩을 왼쪽 - 화면의 효과가 작은 대신 아래 왼쪽으로?

출처

2016-10-05 JTheboss

그냥 패딩은 왼쪽 ADD : CSS에서

이 뭔가를 작성해야? – Swordys

제공 jsfiddle –

패딩 왼쪽은 작거나 아래로 화면 전용이기 때문에 해결되지 않습니다. 패딩 - 윗면은 중형 및 상판 용이므로 어떤 종류의 상태가 필요합니다. – JTheboss

미디어 쿼리를 사용할 수 있습니다. 그 materializecss을 고려

는 태블릿 기기 만 규칙을 제공해야합니다 (다른 모든 것들에 대한 < 태블릿 = 600PX, 데스크톱 < = 992px과> 992px) 세 가지 다른 화면 크기를 사용합니다.

@media (max-width: 600px) { 
    #mylogo{ 
     padding-left: 15px; 
    } 
} 

@media (min-width: 601px) { 
    #mylogo{ 
     padding-top: 15px; 
     padding-left:0; 
    } 
}

출처

2016-10-05 22:28:42

그냥 약간의 오타가있어, myLogo가 아닌 mylogo가 맞다. – JTheboss

@JT 보스 오타가 수정되었습니다. 다행입니다! –

미디어 쿼리를 추가하십시오.

@media screen and (max-width: 480px) { 
    #mylogo { 
     padding-left: 10px; 
    } 
} 

@media screen and (min-width: 481px) { 
    #mylogo { 
     padding-left: 0; 
     padding-top: 15px; 
    } 
}

최대 480 픽셀을 화면 (당신이 조정할 수)에가, 왼쪽 패딩 이미지에 추가됩니다. 기기가 481px 이상인 경우 이미지의 왼쪽 여백이 0으로 재설정되고 위쪽 여백은 15px로 지정됩니다.

위에서 볼 수 있듯이 min-width과 max-width은 두 가지 조건 만 사용할 수 있습니다. 사용할 수있는 다른 정보를 보려면 다음 링크를 확인하십시오. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

출처

2016-10-05 22:27:20 heyitsjhu

CSS를 사용하여 여백을 조건부로 조정하는 방법은 무엇입니까?

답변

관련 문제