반응형 웹 만들기 - 미디어쿼리 반응형 사이즈

 

반응형 웹을 만드려면 미디어쿼리를 적용하여

각 디바이스별 사이즈를 적용해주어야 한다.

각 디바이스별로 웹에 있는 구성요소들의 크기라던가, 배치를

다르게 해주면 다양한 웹 크기에 대응할 수 있다.

 

---

 

내가 지금 제작하고 있는 포트폴리오에는 다음과 같은 사이즈를 적용하였다.

 

@media (max-width: 1024px) {

}

@media (max-width: 769px) {

}

@media (max-width: 575px) {
  
}

 

더 세부적으로 크기를 지정할 수 있으나,

난 대표적인 디바이스별로만 크기를 적용하였다.

 

---

@media (max-width : 1024px) :: 태블릿

@media (max-width : 769px) :: 작은 사이즈의 태블릿, 모바일 가로모드

@media (max-width : 575px) :: 스마트폰

---

 

기본적인 css는 표준 웹 사이즈를 바탕으로 하여 제작하고 (min-width:1025px)

미디어쿼리 css 파일을 별도로 분리하여 위의 사이즈별로 커스터마이징하거나,

커스터마이징하고싶은 부분에만 미디어쿼리를 적용하면 된다.

 

 

미디어쿼리는 화면배율이 큰 순 -> 작은 순 으로 지정한다.

 

 

 

---

 

그 밖에, 디바이스별 사이즈를 확인하고 싶다면,

Device Metrics 에서 확인할 수 있으니 참고바람.

https://material.io/resources/devices/

Device Metrics - Material Design