그러나 여러 가지 다른 너비 정의가 존재합니다. 예를 들어 320 및 위로는 480, 600, 768, 992 및 1382px의 다섯 가지 기본 CSS3 미디어 쿼리 증분을 가있습니다. 이 응답 웹 개발 자습서에서 주어진 예제와 함께, 나는 적어도 10 개의 다른 접근 방식을 열거 할 수 있습니다. 웹 사이트의 시각적 모양을 조정하는 데 필요한 만큼의 CSS 규칙을 이 미디어 쿼리 내에 배치할 수 있습니다. 예를 들어 글꼴 크기를 20픽셀로 늘릴 뿐만 아니라 모든 단락의 색상을 검정색(#000000)으로 변경하려는 경우 미디어 쿼리는 다른 장치에 맞춤형 스타일 시트를 제공하는 데 널리 사용됩니다. 간단한 예제를 보여 주기 위해 다른 장치의 배경 색을 변경할 수 있습니다: jQuery Plugin wichIE/이전 브라우저에서 기본 미디어 쿼리 지원을 사용할 수 있습니다: http://protofunc.com/scripts/jquery/mediaqueries/ 미디어 기능 설명 사용자 에이전트, 출력 장치 또는 환경의 특정 특성을 나타냅니다. 미디어 기능 표현식은 존재 여부 나 값을 테스트하며 전적으로 선택 사항입니다. 각 미디어 피쳐 표현식은 괄호로 둘러싸여야 합니다. 미디어 쿼리가 도움이 될 수 있습니다.

설계의 특정 부분이 중단점의 각 면에서 다르게 행동할 중단점을 추가할 수 있습니다. 팁: 미디어 쿼리는 반응형 레이아웃을 만드는 훌륭한 방법입니다. 미디어 쿼리를 사용하면 페이지의 실제 콘텐츠를 변경하지 않고 스마트폰이나 태블릿과 같은 기기에서 탐색하는 사용자에 대해 웹 사이트를 다르게 사용자 지정할 수 있습니다. RWD 자습서: 미디어 쿼리가 있는 반응형 웹 디자인 미디어 쿼리는 선택적 미디어 유형과 임의의 수의 미디어 기능 표현식으로 구성됩니다. 논리 연산자를 사용하여 여러 가지 방법으로 여러 쿼리를 결합할 수 있습니다. 미디어 쿼리는 대/소문자를 구분하지 않습니다. 미디어 쿼리는 웹 사이트의 CSS 파일 내부에 있는 작은 조건문과 유사하므로 화면 크기가 특정 임계값보다 높거나 낮을 때와 같이 특정 조건이 충족된 경우에만 적용되는 특정 CSS 규칙을 설정할 수 있습니다. 또한 모든 큰 크기에 대해 미디어 쿼리를 더 추가하여 다음과 같이 스타일 시트에 추가할 수 있습니다. 다음은 매우 간단한 예입니다: 일반적으로 “최소 너비” 또는 “최대 너비”를 사용하여 미디어 쿼리를 작성하는 두 가지 방법이 있습니다.

지금까지 우리는 “최소 폭”이 작동하는 것을 보았습니다. 이렇게 하면 브라우저가 최소 너비에 도달하면 미디어 쿼리가 적용됩니다. 따라서 브라우저의 너비가 1000픽셀 이상일 때 “최소 너비: 1000px”를 사용하는 쿼리가 적용됩니다.