Reference : 모바일 반응형 레이아웃 적용

[rktdnjs]

Description

웹 환경이 아닌 모바일 환경에서의 레이아웃 적용 방법에 대한 메모

https://comicolon.tistory.com/9

현재는 대부분의 페이지에 다음과 같이 레이아웃을 적용시켜 놓은 상태

@layer components {
  .page--layout {
    position: absolute;
    width: 360px;
    height: 800px;
    top: 50%;
    left: 50%;
    margin-left: -180px;
    margin-top: -400px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-sizing: content-box;
    overflow: auto;
  }
}

일부 화면이 작은 모바일 환경에서는 레이아웃이 깨질 수 있다.
그럴 경우 특정 크기 이하의 화면에서 모바일 전용 레이아웃을 적용하는 방법은 다음과 같다.

@layer components {
  .page--layout {
      (...)
  }
  .page--mobile--layout {
      (모바일 화면에 적용할 별도의 레이아웃을 선언)
  }
}

const HomePage = () => {
  return (
    <div className="lg:page--layout sm:page--mobile--layout">
    (사용자의 화면 크기에 따라 page--layout 혹은 page--mobile--layout이 적용됨)
    </div>

Todo

ETC