최소 너비 및 최대 너비 미디어 쿼리 구문
반응 형 웹 디자인 은 방문자 페이지의 크기에 따라 동적으로 레이아웃과 모양을 변경할 수있는 웹 페이지를 작성하는 방식입니다. 큰 화면은 대형 디스플레이에 적합한 레이아웃을 수신 할 수있는 반면, 휴대 전화와 같은 소형 장치는 작은 화면에 적합한 방식으로 동일한 웹 사이트를 수신 할 수 있습니다. 이 접근법은 모든 사용자에게 더 나은 사용자 환경을 제공하며 검색 엔진 순위를 향상시키는 데 도움이됩니다. 반응 형 웹 디자인의 중요한 부분은 CSS 미디어 쿼리입니다.
미디어 쿼리는 웹 사이트의 CSS 파일에있는 조건문과 거의 같아서 특정 조건이 충족되면 (예 : 화면 크기가 특정 임계 값보다 높거나 낮은 경우와 같은) 특정 CSS 규칙을 설정할 수 있습니다.
실제 미디어 쿼리
그렇다면 웹 사이트에서 미디어 쿼리를 어떻게 사용합니까? 다음은 매우 간단한 예입니다.
- 비주얼 스타일이없는 구조화 된 HTML 문서 (CSS가 사용하는 것)
- CSS 파일에서는 일반적으로 페이지의 스타일을 지정하고 웹 사이트 모양에 대한 기준을 설정함으로써 시작할 수 있습니다. 페이지의 글꼴 크기를 16 픽셀로하고 싶다면 다음과 같이 작성하면됩니다. body {font-size : 16px; }
- 이제는 충분한 부동산을 보유한 대형 화면의 글꼴 크기를 늘릴 수 있습니다. 미디어 쿼리 (Media Queries)가 시작됩니다. 미디어 쿼리는 @media screen 및 (최소 너비 : 1000px) {}와 같이 시작합니다.
- 이것이 미디어 쿼리의 구문입니다. @media로 시작하여 미디어 쿼리 자체를 설정합니다. 다음으로 "미디어 유형"을 설정합니다.이 경우 "화면"입니다. 데스크톱 컴퓨터 화면, 태블릿, 휴대 전화 등에 적용됩니다. 마지막으로 "미디어 기능"을 사용하여 미디어 쿼리를 종료합니다. 위의 예에서는 "중간 너비 : 1000px"입니다. 이것은 Media Query가 최소 너비가 1000 픽셀 인 디스플레이에 적합하다는 것을 의미합니다.
- 미디어 쿼리의 이러한 요소 다음에 일반 CSS 규칙에서와 비슷한 여는 중괄호와 닫는 중괄호를 추가합니다.
- 미디어 쿼리의 마지막 단계는이 조건이 충족되면 적용 할 CSS 규칙을 추가하는 것입니다. 다음과 같이 미디어 쿼리를 구성하는 중괄호 사이에 이러한 CSS 규칙을 추가합니다. @media screen 및 (최소 너비 : 1000px) {body {font-size : 20px; }
- 미디어 쿼리의 조건이 충족되면 (브라우저 창이 최소 1000 픽셀 너비 임)이 CSS 스타일이 적용되어 사이트의 글꼴 크기가 원래 설정된 16 픽셀에서 새 값인 20 픽셀로 변경됩니다.
더 많은 스타일 추가하기
웹 사이트의 시각적 모양을 조정하는 데 필요한만큼이 미디어 쿼리에 많은 CSS 규칙을 배치 할 수 있습니다. 예를 들어 글꼴 크기를 20 픽셀로 늘릴뿐만 아니라 모든 단락의 색상을 검정색 (# 000000)으로 변경하려면 다음을 추가 할 수 있습니다.
@media 화면 및 (최소 너비 : 1000px) {body {font-size : 20px; } p {color : # 000000; }}추가 미디어 쿼리 추가
또한 더 큰 크기의 미디어 쿼리를 추가하여 스타일 시트에 다음과 같이 추가 할 수 있습니다.
@media 화면 및 (최소 너비 : 1000px) {body {font-size : 20px; } p {color : # 000000; {} @ 미디어 화면 및 (최소 너비 : 1400 픽셀) {body {font-size : 24px; }}첫 번째 미디어 쿼리는 글꼴 크기를 20 픽셀로 변경하면서 너비가 1000 픽셀로 시작되었습니다. 그런 다음 브라우저가 1400 픽셀을 넘으면 글꼴 크기가 다시 24 픽셀로 변경됩니다. 특정 웹 사이트에 필요한만큼 미디어 쿼리를 추가 할 수 있습니다.
최소 너비와 최대 너비
일반적으로 "최소 너비"또는 "최대 너비"를 사용하여 미디어 쿼리를 작성하는 두 가지 방법이 있습니다. 지금까지 우리는 "최소 너비"를 보았습니다. 이렇게하면 브라우저가 최소 최소 너비에 도달하면 미디어 쿼리가 적용됩니다. 따라서 브라우저가 최소 1000 픽셀 이상인 경우 "최소 너비 : 1000px"를 사용하는 쿼리가 적용됩니다. 이 스타일의 미디어 쿼리는 "모바일 우선"방식으로 사이트를 구축 할 때 사용됩니다.
"max-width"를 사용하면 반대 방향으로 작동합니다. 브라우저가이 크기 아래로 떨어지면 "max-width : 1000px"의 미디어 쿼리가 적용됩니다.
이전 브라우저에 관해서
미디어 쿼리의 한 가지 문제점은 Internet Explorer의 이전 버전에서 지원이 부족하다는 점입니다. 고맙게도 오래된 웹 브라우저에서 미디어 쿼리를 지원할 수 있는 polyfill을 사용할 수 있으므로 웹 사이트에서 미디어 쿼리를 사용할 수 있으며 이전 브라우저 소프트웨어에서 해당 사이트의 표시가 손상되지 않도록 할 수 있습니다.
제레미 지라드 편집 : 1/24/17