-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
min-width에 대해서..
20.05.11 00:29 작성 조회수 114
0
미디어쿼리를 사용하고 있는데 모바일 -> 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%;
}
}
`;
답변을 작성해보세요.
0
1분코딩
지식공유자2020.05.11
아, 무조건 모바일을 기준으로 먼저 잡는게 좋다는 이야기는 아니고요^^;
모바일을 기본으로 하는게 좋을지, 데스크탑을 기본으로 하는게 좋을지는 디자인에 형태에 따라 다릅니다.
이미 완성되어 있는 것을 바꾸실 필요는 없다고 생각됩니다^^
모바일을 디폴트로 해서 min-width를 확장해 나가는 경우와
데스크탑을 디폴트로 해서 max-width로 축소해 나가는 경우에 대한 일반적인 차이점은 아래 포스트를 참고하시면 좋을 것 같습니다.
답변 1