min-width에 대해서..

Question

미디어쿼리를 사용하고 있는데 모바일 -> pc 순으로 레이아웃을 만드는 게 좋다고 말씀하셔서 min-width를 이용하여 화면의 px을 늘려가면서 만들려고 합니다.(react에서 styled-componet 사용 중입니다.) 이 부분은 header부분인데 처음 만들때 max-width로 만들었습니다. min-width로 수정하려고 하는데 혹시 어떻게 바꿔야 될지 알고 싶습니다. 밑의 코드에서 transition이나 transform , padding-top등 화면이 min-width가 커질수록 필요가 없어져서 없애야 되는데 어떻게 없애는지 궁금합니다. const List = styled . ul ` display: flex; flex-flow: row nowrap; @media only screen and (max-width: 768px) { flex-flow: column nowrap; background-color: #0d2538; position: fixed; top: 0; right: 0; height: 100vh; width: 300px; padding-top: 3.5rem; transition: trasnform 0.3s ease-in-out; transform: ${ ({ open }) => ( open ? `translateX(0)` : `translateX(100%)` ) } ; @media only screen and (max-width: 500px) { width: 100%; } } ` ;

1분코딩 · Answer

아, 무조건 모바일을 기준으로 먼저 잡는게 좋다는 이야기는 아니고요^^; 모바일을 기본으로 하는게 좋을지, 데스크탑을 기본으로 하는게 좋을지는 디자인에 형태에 따라 다릅니다. 이미 완성되어 있는 것을 바꾸실 필요는 없다고 생각됩니다^^ 모바일을 디폴트로 해서 min-width를 확장해 나가는 경우와 데스크탑을 디폴트로 해서 max-width로 축소해 나가는 경우에 대한 일반적인 차이점은 아래 포스트를 참고하시면 좋을 것 같습니다. https://studiomeal.com/archives/1004