반응형과 미디어 쿼리
2023. 3. 8. 10:00ㆍ공부/HTML／CSS
반응형
- 뷰포트 : 웹을 기반으로 한 브라우저의 기본 뷰포트는 980px이기에 뷰포트를 따로 지정해 줘야 한다. <meta>를 이용 <head>사이에 작성한다. <meta name="viewport" content="속성1=값1, 속성2=값2", …">
자주 쓰는 뷰포트는 스마트폰 너비에 맞추고 초기배율 1로 <meta name="viewport" content="width-device-width, initial-scale=1">
종류 설명 사용가능한 값 기본값 width 뷰포트 너비 device-width 또는 크기 브라우저 기본값 height 뷰포트 높이 device-height 또는 크기 브라우저 기본값 user-scalable 확대, 축소 가능 여부 yes 또는 no yes initial-scale 초기 확대, 축소 값 1 ~ 10 1 - 뷰포트 단위 : vw, vh, vmin, vmax
미디어 쿼리
- @media screen and ~ {} : 화면용
- @media print and ~ {} : 프린터용
- 단말기의 넓이 : device-width. device-height (min-max 도 가능)
- orientation(화면회전 속성) : loandscape(가로모드), portrait(세로모드)
@media screen and(min-device-width : 800px) and (orientation : loandscape){}
- 크롬의 미디워쿼리 막대 보기를 하면 현재 설정되어 있는 미디어 쿼리 사이즈를 볼 수 있다. 파랑색은 최대 너비, 초록색은 최소너비와 초대 너비 둘 다 사용. 주황색은 최소너비 기준이다.
'공부 > HTML／CSS' 카테고리의 다른 글
| 기초 CSS (0) | 2023.03.08 |
|---|---|
| form과 input (0) | 2023.03.07 |
| 기타 (0) | 2023.03.07 |
| %, em, rem, vh, vw (0) | 2022.09.30 |
| CSS로 도형 만들기 (0) | 2022.09.29 |