최소 너비 대 최대 너비 미디어 쿼리 CSS

Question

누군가가 media queries으로 나를 도울 수 있기를 바랍니다.

일련 번호가 min width -max widthmedia queries입니다.

그러나 max-width 구문을 제거하면 레이아웃이 손상되지만 왜 이런 일이 발생하는지 알 수 없습니다. 내가합니다 (and 포함) max-width 구문을 제거하면

이 논리는 내가 320px부터 스타일을 적용, 말인지 .. 동일해야합니다, 그때 변환 할 수있는 방법

까지 480px에서 새로운 스타일을 적용 이건 그냥 min width에요? (모바일 첫 번째 접근법).

나는 분명한 뭔가를 놓치고 있습니까?

@media only screen and (min-width: 320px) and (max-width : 480px) { 
    #header h1 { 
     font-size: 2em; 
    } 
    #nav ul li { 
     margin: 0 .8em .6em 0; 
     display: block; 
    } 

.......................more rules 
} 


@media only screen and (min-width: 480px) and (max-width : 800px) { 
    #header h1 { 
     font-size: 2.4em; 
    } 
    #nav ul li { 
     margin: 0 .8em .6em 0; 
     display: inline-block; 
....................................more rules 
    } 
} 

Answer 1

당신이 모바일 첫 번째 방법를 사용하는 경우는 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*/ 
    } 

:

그래서,이 같은 시도 비 모바일 우선 메서드min-width을 설정할 필요가 없으며 다음과 같이 표시됩니다.

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

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


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