React 미디어쿼리 (@media)

 

 

 

 

 

 

 

 

 

React 미디어쿼리 (@media)

@media screen and (max-width:500px) {

    .asdf{

        background-color: red;

    }

}

화면의 너비가 500px이하가 되었을 때, asdf클래스 네임을 가진 부분의 배경색상 변화 (빨강색)

 

@media screen and (min-width:500px) {

    .asdf{

        background-color: blue;

    }

}

화면의 너비가 500px이상이 되었을 떄, asdf클래스 네임을 가진 부분의 배격생상 변화 (파랑색)

 

 

 

문제1) ~500px : red, 501 ~ 600px : green, 601px ~ : blue

@media screen and (max-width:600px) {

    .asdf{

        background-color: green;

    }

}

@media screen and (max-width:500px) {

    .asdf{

        background-color: red;

    }

}

@media screen and (min-width:600px) {

    .asdf{

        background-color: blue;

    }

}

max-width를 두가지 함으로써, 500px이하의 배경색상이 green 과 red가 겹친다.

우선순위의 문제를 해결하기 위해, 500px이하의 배경색을 설정하고 싶은 부분을 후순위로 배치한다.

 

 

문제 2) 화면 크기에 따라, 배치 순서 변경

@media(max-width:500px){

    main{

        order:0;

    }

    nav{

        order:1;

    }

    aside{

        order:2;

        display: none;

    }

}

main, nav, aside가 display: flex의 적용을 받고 있는 상태에서, order를 통해 배치 순서 설정 가능

display: none으로 아예 안보이게도 가능

 

 

https://www.w3schools.com/cssref/css3_pr_mediaquery.php : 더 많은 정보