Snapped View, Portrait View 만들기, CSS 미디어 쿼리

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

* Snapped View 만들기

 

- 320px 크기로 리스트 형식 레이아웃 잡기 -

 

1. Grid는 List로 변환 시킴

2. 각 리스트 항목들은 세로로 정렬됨

3. 설계 구조는 그대로 유지

 

- 리스트 형식이 아닌 경우 -

 

1. 싱글 칼럼 레이아웃 사용

2. 수직 스크롤이 되도록 구성

 

---

 

 

---

 

* Portrait View 만들기

 

- 9:16 비율에 최적화 -

 

1. 여백을 최소화

 

- 리스트 형식의 경우 -

 

1. 공간에 맞게 각 리스트를 배치

2. Landscape와 유사한 구성

3. 스크롤은 가로방향으로 유지

 

-리스트 형식이 아닌 경우

 

1. 2단 컬럼 구성이 가장 적합함

 

---

 

---

 

* CSS 미디어 쿼리 (CSS 파일)

 

- View State 미디어 쿼리를 사용하여 각 상태에 맞는 화면 구성 가능

 

@media screen and (-ms-view-state: snapped)

 

/* Re-arrange and hide/show content */

 

media screen and (-ms-view-state: device-portrait)

@media screen and (-ms-view-state: fill)

@media screen and (-ms-view-state: full-screen)

 

---