CSS 미디어 쿼리로 요소 숨기기

Question

CSS 클래스 시스템에서 화면 크기에 따라 요소를 숨기는 올바른 방법은 무엇입니까?

내 현재의 접근 방식은 미디어 쿼리를 사용하는 것입니다

/* From 768 to 1023 px */ 
@media (min-width: @screen-sm) and (max-width: (@screen-md - 1)) 
{ 
    .hide-sm { display: none; } 
} 

/* From 1024 to 1199 px */ 
@media (min-width: @screen-md) and (max-width: (@screen-lg - 1)) 
{ 
    .hide-md { display: none; } 
} 

문제는 화면이 정확하게 때 (@ 화면-MD는 - 1)이다 폭이 1023 픽셀, 아무도 할 수 있습니다. hide-sm 및 .hide-md 요소가 숨겨집니다.

하지만 768에서 1024 픽셀의 범위를 만들기 @ 화면-MD에서 1 x 1 픽셀을 뺄하지 않을 경우, 거기에 또 다른 문제가 될 것입니다 : .hide-SM의 모두와 요소-MD의 .hide는 1024 픽셀에 표시되지 않습니다 화면.

예 : https://codepen.io/vyprichenko/pen/ZKvGKM

Answer 1

당신은 옳은 길이야 있지만 올바르게 미디어 쿼리를 사용하지 않는 것 같습니다. 특정 지점까지 요소를 보여주고 요소 만 올리고 싶다면 max-width를 사용하십시오. 특정 지점 이후에 요소가 나타나게하려면 min-width 미디어 쿼리가 필요합니다. 이 코드를 사용하여 필요한 결과를 얻을 수있었습니다.

@media(max-width:1023px){ 
     .hide-0-to-1024{ 
     display:none; 
     } 
    } 

@media (min-width: 1024px) { 
     .hide-1024-up { 
     display: none; 
     } 
}