미디어 쿼리 예제 속시원내과 | 2019년 8월 3일

미디어 쿼리를 사용하면 태그변경 없이 휴대폰, 태블릿, 데스크톱 등과 같은 특정 범위의 장치에 대해 웹 페이지 프레젠테이션을 사용자 지정할 수 있습니다. 미디어 쿼리는 장치 너비 또는 화면 해상도와 같은 특정 미디어 피처의 유형 및 조건과 일치하는 미디어 유형 및 0 개 이상의 식으로 구성됩니다. 위의 코드는 장치의 화면 너비가 640px와 1136px 사이인 경우 쿼리 내에서 CSS 스타일을 호출합니다. 최소 너비 속성은 화면의 최소 너비이고 최대 너비는 최대입니다. 미디어 쿼리는 선택적 미디어 유형과 임의의 수의 미디어 기능 표현식으로 구성됩니다. 논리 연산자를 사용하여 여러 가지 방법으로 여러 쿼리를 결합할 수 있습니다. 미디어 쿼리는 대/소문자를 구분하지 않습니다. 다음 예제에서는 장치가 세로 방향이 있거나 장치의 뷰포트에 최소 너비가 3rem이고 최대 종횡비가 2/1인 경우 미디어 쿼리가 해당됩니다. 쿼리에서 -는 어떻게 (최대 장치 폭: 480px) 아이폰에 관련 4 그리고 4S 비록이 두 장치에 대 한 장치 폭은 320 px? 이 자습서에서는 응답 웹 디자인(예: 미디어 쿼리 및 의사 요소)에 대한 몇 가지 구성 요소를 수립하고 각각의 몇 가지 예제를 제시했습니다. 여기서 어디로 가야 할까요? 미디어 쿼리 수준 4 사양에는 “범위” 유형(예: 너비 또는 높이)이 적은 세부 사항이 있는 기능을 사용하여 미디어 쿼리를 만들기 위한 몇 가지 구문 개선 사항이 포함되어 있습니다.

수준 4는 이러한 쿼리를 작성하기 위한 범위 컨텍스트를 추가합니다. 예를 들어 너비에 대한 max-기능을 사용하면 다음을 작성할 수 있습니다. 즉, 이전 브라우저는 유일한 키워드를 이해하지 못하므로 전체 미디어 쿼리가 무시됩니다. 그렇지 않으면 효과가 없습니다: 그러나 여러 가지 다른 너비 정의가 존재합니다. 예를 들어 320 및 위로는 480, 600, 768, 992 및 1382px의 다섯 가지 기본 CSS3 미디어 쿼리 증분을 가있습니다. 이 응답 웹 개발 자습서에서 주어진 예제와 함께, 나는 적어도 10 개의 다른 접근 방식을 열거 할 수 있습니다. 미디어 쿼리 수준 4는 전체 부울 대수학을 사용하여 미디어 쿼리를 결합하는 방법도 추가합니다. 하나는 삼성 갤럭시 S3에 대한 올바른 방법과 오른쪽 미디어 쿼리를 말해 줄 수 있습니다. 팁: 미디어 쿼리는 반응형 레이아웃을 만드는 훌륭한 방법입니다.

미디어 쿼리를 사용하면 페이지의 실제 콘텐츠를 변경하지 않고 스마트폰이나 태블릿과 같은 기기에서 탐색하는 사용자에 대해 웹 사이트를 다르게 사용자 지정할 수 있습니다.

Comments are closed.