Responsive Design, @media

Responsive Design

반응형 디자인은 접속하는 디스플레이의 크기, 종류에 따라 자동으로 변하게 만든 것이다.
어떤 기기에서 접속하든 같은 화면을 보여주는 것은 적응형 디자인(Adaptive Design)이라고 한다.
반응형으로 페이지를 구성하면 모바일용 페이지를 따로 만들고 url를 따로 설정하는 등의 번거로움을 줄일 수 있다.
하지만 상황에 따라 적당히 분류해 사용하는 것이 좋다.(너무 세세하게 분류할 경우 작업시간도 오래 걸리고 리소스 사용도 있다.)

@media

반응형 css 디자인을 하게 해주는 도구이다.

import styled from "@emotion/styled";

const Wrapper = styled.div`
  width: 1000px;
  height: 1000px;
  font-size: 30px;
  background-color: red;

  @media (min-width: 768px) and (max-width: 991px) {
    width: 500px;
    height: 500px;
    font-size: 20px;
    background-color: green;
  }
  @media (max-width: 767px) {
    width: 100px;
    height: 100px;
    font-size: 15px;
    background-color: blue;
    display: none;
  }
`;

export default function ResponsiveDesignedPage() {
  return <Wrapper>box</Wrapper>;
}

css를 디스플레이의 크기에 따라 조절할 수 있다.
예시에서는 글자 크기단위를 px로 사용했지만 em를 사용하는 것이 더 자연스럽게 작용한다.