미디어 쿼리 관련 문제

Question

그래서 부트 스트랩을 사용하여 개인 사이트를 구축하고 있습니다. 현재 모바일 크기에서 콘텐츠를 맞추려고합니다.

제 문제는 queries을 사용하는 방법을 기억할 수 없으며 특정 지점에서 작동하지 않는 방식입니다.

기본적으로 내가하고있는 일은 메인 CSS에 모바일 CSS 스타일을 넣은 다음 화면이 커지면서 변경하는 것입니다.

하지만 어떤 이유로 인해 992px 이후에 쿼리가 작동을 멈 춥니 다.

이 방법을 사용하면 더 효과적 일 수 있습니다.

당신이 /가 필요 좋아하는 크기를 사용 기억 : 여기

Answer 1

는 media queries을 사용하는 방법에 대해 설명합니다. 아래는 데모 용입니다. min-width 사용

/*========== Non-Mobile First Method ==========*/ 

    @media only screen and (max-width: 960px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width: 768px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width: 640px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width: 480px) { 
     /*your CSS Rules*/  
    }  
    @media only screen and (max-width: 320px) { 
     /*your CSS Rules*/ 
    } 

모바일 첫 번째 방법 : max-width를 사용

비 모바일 첫 번째 방법 여기

/*========== Mobile First Method ==========*/ 

    @media only screen and (min-width: 320px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width: 480px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width: 640px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width: 768px) { 
     /*your CSS Rules*/  
    }  
    @media only screen and (min-width: 960px) { 
     /*your CSS Rules*/ 
    } 

는 W3.org

에서 좋은 tutorial입니다