CSS 미디어 쿼리 적용 방법

<style>
     // 전체 모니터 화면에 꽉 차던 홈페이지를 미디어 쿼리를 이용해서 최대 사이즈 1100px 로 변경하는 내용.
    /*  작은 사이즈 화면에서 css 적용 되도록 미디어 쿼리 추가 */
    @media (min-width: 300px) { // 최소 사이즈 300px 일때 적용
        section img.main_img_1 { // section 태그 안에 img 에안에 있는 main_img_1 클래스인 것을 찾아서 아래 처럼 적용 
            width : 100%;
            margin : 0 auto;
        }
        div .row  {
            width : 100%;
            margin : 0 auto;
        }
    }
    @media (min-width: 768px) {
        section img.main_img_1 {
            width : 100%;
            margin : 0 auto;
        }
        div .row  {
            width : 100%;
            margin : 0 auto;
        }
    }
    /*    큰화면에서 width사이즈 1100으로 되게   */
    @media (min-width: 1170px) {
        html, body {
            width:1100px;
            margin: 0 auto;
        }
        section div nav {
            width : 1100px;
            margin : 0 auto;
        }
        /*  1.경로  2.상세  3.주문 백그라운드 이미지. */
        section img.main_img_1 {
            width : 1100px;
            margin : 0 auto;
        }
        div .row  {
            width : 1100px;
            margin : 0 auto;
        } 
    }
</style>