Replies: 3 comments 7 replies
const MainContainer = styled.main`
position: relative;
max-width: 480px;
min-height: calc(var(--vh, 1vh) * 100);
margin: 0 auto;
background-color: ${theme.colors.white};
`;
const MainSection = styled.section<{ headerHeight: number; bottomNavHeight: number }>`
position: absolute;
top: ${(props) => props.headerHeight}px;
left: 0;
right: 0;
bottom: ${(props) => props.bottomNavHeight}px;
overflow: auto;
`; <MainContainer>
{header}
<MainSection headerHeight={headerHeight} bottomNavHeight={hideBottomNavigation ? 0 : BOTTOM_NAV_HEIGHT}>
{children}
</MainSection>
{floatButton && <FloatButtonContainer>{floatButton}</FloatButtonContainer>}
{!hideBottomNavigation && <BottomNavigation />}
</MainContainer> |
|
각 페이지에서 props로 header높이, bottom 높이를 넘겨주었다. |
|
위 프로젝트에서는 max-width를 480px, min-height를
|
|
import { useEffect } from 'react';
export const useCalcViewHeight = () => {
useEffect(() => {
const setViewHeight = () => {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
};
window.addEventListener('resize', setViewHeight);
setViewHeight();
return () => {
window.removeEventListener('resize', setViewHeight);
};
}, []);
};
|
|
|
또한, 위 프로젝트는 rem단위 아니라 px단위를 사용하여 휴대폰 사이즈가 작아질 경우 그에 맞게 폰트 크기나, 너비 등 크기가 그게 맞게 작아지지 않는다. rem은 최상위 요소의 font-size의 크기에 비례한다. 즉, html{
font-size:20px;
}
html > div{
width:10rem; // 200px
}위와 같이 html의 자식 노드인 div는 최상위 요소의 font-size에 비례하는 방식으로 크기가 적용된다. |
<div
id="layout"
className="relative mx-auto min-h-[100vh] w-[375px] overflow-hidden bg-gray-900 text-gray-100"
>
{isFormHeader ? <FormHeader /> : !isSearch && <Header />}
{children}
{/* 푸터 */}
</div> |
|
width의 경우 375px, height의 경우 100vh로 설정하였다. 이 방식으로 하면 모바일의 너비에 따라, 그리고 navigate값에 따라 자연스럽게 동작할 수 있을까? |
|
|
위 내용들을 바탕으로 아래와 같이 layout을 설정하였다. // app/layout.tsx
<html lang="ko">
<body className="flex h-screen w-screen justify-center bg-slate-50 ">
<div className="relative h-full w-full max-w-[450px] overflow-y-scroll bg-white">
{children}
</div>
</body>
</html>휴대폰 사이즈의 화면 바깥, 밖 body에서는 또한, min-width도 설정을 하려는 생각을 하였으나, min-width를 설정할 경우 설정값보다 작아질 때 화면이 더이상 줄지 않는다는 치명적인 단점이 있었다. |
Uh oh!
There was an error while loading. Please reload this page.
.
All reactions