일반적인 반응형

@media only screen and (max-width: 780px) {}

props 변수 반응형

@media only screen and (max-width: ${props => props.device}) {}

• d.ts 파일에 device, PC 등 변수를 만들어 props로 크기 넣기

코드 해석

only|not

• 보통 제외하고 @media screen만 사용함
  only : 뒤의 조건에서 만
  not : 뒤의 조건을 제외한

미디어 타입

all : 모든 미디어 타입
aural : 음성 합성 장치
braille : 점자 표시 장치
handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응
print : 인쇄 용도
projection : 프로젝터
screen : 컴퓨터 스크린
tty : 디스플레이 능력이 한정된 털렉스, 터미널, 수동 이동 장치 등 고정 된 글자를 사용하는 미디어
tv : 음성과 영상이 동시 출력되는 장치
embrossed : 페이지에 인쇄된 점자 표시 장치

속성

width : 웹 페이지의 가로 길이
height : 웹 페이지의 세로 길이
device-width : 단말기의 가로 길이
device-height : 단말기의 세로 길이
orientation : width 와 height 을 구해
width > height 일 경우 landscape
height > width 일 경우 portrait
aspect-ratio : width / height 비율
device-aspect-ratio : 단말기의 물리적인 화면 비율
color-index : 단말기에서 사용하는 최대 색상 수
monochrom : 흑백 컬러만을 사용하는 단말기에서 흰색과 검은색 사이의 단계
resolution : 지원하는 해상도를 판단
color : 단말기에서 사용하는 최대 색상 수의 비트 수
(2의 지수를 뜻한다) ex) 1 은 2, 2 는 4, 3 은 8

참고 사이트

https://velog.io/@pyo-sh/React-Responsive