쌤 반응형 쿼리 사이즈 질문있습니당.

Question

@media  ( min-width :  600px ) {    .card-list  {      display :  flex ;      flex-wrap :  wrap ;      margin :  0   -1rem ;      /* justify-content: space-between; */   }    .card-item  {      width :  50% ;      padding :  0   1rem ;   } } @media  ( min-width :  1200px ) {    .card-item  {      width :  33.33333% ;   } } /* 아이패드 기본사이즈 */ @media  ( min-width :  1024px ) {    .page  {      display :  flex ;      flex-wrap :  wrap ;   }    .header  {      width :  100% ;   }    .menu  {      width :  100% ;   }    .secondary  {      width :  20% ;   }    .secondary-a  {      order :  1 ;   }    .secondary-b  {      order :  3 ;   }    .primary  {      order :  2 ;      width :  60% ;   }    .footer  {      order :  4 ;      width :  100% ;   } }  @media  ( min-width :  1400px ) {    .primary  {      /* width: calc(100% - 600px); */      /* flex-grow: 1; */      flex :  1   1   auto ;   }    .secondary  {      width :  300px ;   } } (위의 코드를 전체적으로 살펴볼 필요는 없으세요. 제 질문의 요지가 잘 파악이 안되실때 참고하시라구 적어놓은거에요!) min 1200px , 1024px, 1400px 각각 설정해주셨는데 리액트에서는 보통 작업할때는 모바일px,  테블랫px, 데스크탑px 등등 3가지를 설정해준 파일을 따로 만들어서 적용해주는 식으로 하는거같던데  강의에서 처럼 min으로 안하고 max로 하는거같더라구요. min과 max 차이점이 클까요? 그냥 작업자 편할대로 하는거죠..? 강의에서는 미디어쿼리를 총 네개 작성하셨는데, max로하면 세개로까지 줄일수있을까요?

1분코딩 · Answer

반갑습니다!(맞춤인사 ㅋㅋㅋㅋㅋ)
반가우면반갑다고해님 질문에 답을 달다가, 뭔가 길어져서 다른 분들도 보실 수 있도록 포스트로 작성하면 어떨까 싶어 아예 글로 작성해 보았습니다 ㅋㅋ
말씀하신대로 정답은 없으며, 작업자 본인이 편한 방식으로 하면 됩니다.
제가 min-width를 선호하는 이유는 글에 써두었어요~

반가우면반갑다고해 · Answer

캄사합니당. 답변은 제 벨로그에도 퍼갈께요! 물론 링크도 같이 첨부해서요~ (찡긋)