응답하는 클래스에 따라 너비가 다를 수 있습니다.

Question

은 다양한 디스플레이 스타일 (xs, sm, md, lg)에 대해 특정 너비를 지정하기 위해 미디어 쿼리를 사용하지만 부트 스트랩 미디어의 일부인 너비를 반복해야합니다 쿼리

@media (min-width: 768px) { 
    img { 
    width: 20%; 
    } 
} 

질문 : 숫자를 반복하지 않고 DRY를 더 많이 할 수 있습니까?

img.visible-xs { 
    width: 20%; 
} 

하지만 분명히 그 클래스는 적용되지 않습니다 내 첫번째 생각이었다.

다른 미디어 쿼리 집합을 사용하지 않고이 작업을 수행하는 방법에 대해 알고 싶습니다.

Answer 1

less/sass 믹스 인으로이 작업을 수행 할 수 있습니다. 예 : less와 단지

@screen-xs: ~"only screen and (max-width: 767px)"; 
@screen-sm: ~"only screen and (min-width: 767px) and (max-width: 991px)"; 
@screen-md: ~"only screen and (min-width: 992px) and (max-width: 1199px)"; 
@screen-lg: ~"only screen and (min-width: 1200px)"; 

를 정의한 다음이

img { 
    @media @screen-xs { 
    width: 20%; 
    } 
} 

처럼 사용할 수 있습니다