105. 반응형 미디어쿼리 TIL 23.01.02

---

 

반응형 미디어쿼리

미디어 쿼리 
-  width, height, color .. 속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절
- 컨텐츠를 별도로 변경하지 않아도 웹 페이지 접속하고 있는 기기에 알맞은 형태로 스타일을 조절

사용방법
@media 매체유형 and (표현식) {
           css 스타일 코드 ...
}

매체 유형:
all : 모든 매체유형
screen : 컴퓨터나 태블릿, 스마트폰...
speech : 스크린 리더
print : 프린터 기기

최종프로젝트에서 미디어쿼리를 사용해서 반응형을 구현했었다. 그 당시에는 배우지 않아서 아래 코드처럼  구현했었다.

@media (min-width: 760px) {
    .root {
        width: 500px;
        height: 88vh;
        margin-bottom: 6vh;
    }

    .nav-wrap>div {
        max-width: 500px;
        margin: 0 auto;
    }

    .header {
        width: 500px;
        left: 50%;
        margin-left: -250px;
    }
}

 

프로젝트에서 적용한 미디어쿼리가 1가지 크기로만 적용되어 있어서  더 자세하게 반응형을 적용하고 싶어

추가적으로 아래 코드를 추가해봤다.

/*테블릿: 768px ~*/

@media screen and(min-width: 768px) {
    .root {
        width: 500px;
        height: 88vh;
        margin-bottom: 6vh;
    }

    .nav-wrap>div {
        max-width: 500px;
        margin: 0 auto;
    }

    .header {
        width: 500px;
        left: 50%;
        margin-left: -250px;
    }
}

/*데스크탑 가로 사이즈 : 1024px ~ 1280px*/

@media screen and (min-width: 1024px) {
    .root {
        width: 1000px;
        height: 88vh;
        margin-bottom: 6vh;
    }

    .nav-wrap>div {
        max-width: 1000px;
        margin: 0 auto;
    }

    .header {
        width: 1000px;
        left: 50%;
        margin-left: -500px;
    }
}