@media : 반응형 사이트 설정하기(1600px 이하)

@media를 사용하면 화면 크기에따라 반응하는 사이트를 만들 수 있다

예)화면이 1599px 이하일 경우, 배경색을 blue, 글자색을 whith 적용

    화면이 1280px 이하일 경우, 배경색을 greenyellow, 글자색을 whith 적용

//width≤1599px
@media screen and (max-width:1599px){
    body {
        background: rgb(0, 0, 255);
        color: rgb(255, 255, 255);
    }
}

//width≤1280px
@media screen and (max-width:1280px){
    body {
        background: rgb(173, 255, 47);
        color: rgb(255, 255, 255);
    }
}

 

---

기본값을 하나씩 변경하는 느낌으로 코드를 넣어줍니다.

 

기본 화면일 경우 (1600px 이상)

.wrap {
    padding-left:200px;
}
header {
    position: fixed; top: 0; bottom: 0; left:0;
    width: 200px;
}   
.nav-utill {
    height: 50px;
    background: $b;
    color: rgb(255, 255, 255);
}
.container {
    height: calc(100vh - 50px);
}

 

반응하는 화면일 경우 (1600px 미만)

@media screen and (max-width:1599px){
    .wrap {
        padding-left:0px;
    }
    header {
        position: static; top: 0; left:0; right: 0;
        width: 100%; height: 150px;
    }
    .container {
        height: calc(100vh - 200px);
    }
}