"뷰포트" 너비를 사용하여 사용 중인 장치를 확인할 수 있습니다.
컴퓨터 그래픽에서 뷰포트는 일반적으로 사용자가 현재 보고 있는 다각형(보통 직사각형) 영역을 나타냅니다. 웹 브라우저의 뷰포트에 관해 이야기할 때 일반적으로 콘텐츠가 표시되고 사용자가 창 외부의 콘텐츠를 볼 수 없는 창을 말합니다.
기본적으로 뷰포트에는 두 가지 유형이 있습니다.
브라우저가 전체 웹페이지를 그리는 고정 뷰포트를 레이아웃 뷰포트라고 합니다.
배율 조정이나 다른 이유로 인해 현재 표시되는 레이아웃 뷰포트 부분을 시각적 뷰포트라고 합니다.
기본적으로 기기의 물리적인 너비와 높이를 의미합니다. 화면 크기가 다양한 장치가 많이 있으며, 화면 크기에 따라 사용자가 웹 페이지와 상호 작용하는 방식이 달라집니다. 그렇다면 화면 크기와 뷰포트 너비 사이의 관계는 무엇입니까?
기기에 관계없이 사용자는 수직 스크롤에 더 익숙합니다. 따라서 레이아웃 뷰포트가 가질 수 있는 최대 너비는 기기 물리학에 의해 제한되기 때문에 뷰포트 너비를 사용하여 기기를 분류합니다. 너비.
이 시점에서 우리는 "뷰포트"가 무엇인지, 그리고 이것이 화면 크기와 어떤 관련이 있는지를 알았습니다. 특정 너비 이후 스타일이 변경되는 반응형 웹 페이지를 원한다면 메타 뷰포트 태그를 사용하여 뷰포트를 설정해야 합니다.
이 태그는 브라우저에 페이지의 크기와 배율을 제어하는 방법을 알려줍니다. 메타 뷰포트 값 width=device-width은 페이지 너비(장치 독립적 픽셀 단위)를 화면 너비와 일치하도록 조정하도록 페이지에 지시합니다.
페이지는 기기 방향에 관계없이 CSS 픽셀과 기기 독립적 픽셀 사이에 1:1 관계를 설정하도록 브라우저에 지시하는initial-scale=1 값을 추가하여 전체 가로 너비를 활용할 수 있습니다.
아래는 장치 너비와 초기 배율 1을 사용하여 뷰포트를 설정하는 예입니다.
으아아아우리는 뷰포트 너비를 사용하여 스타일 변경을 실행할 수 있다는 것을 알고 있습니다. 이제 CSS의 미디어 쿼리에 대해 논의하겠습니다. 미디어 쿼리를 사용하면 전체 장치 유형(예: 인쇄 대 화면) 또는 기타 세부 정보(예: 화면 해상도 또는 브라우저 뷰포트 너비)를 기반으로 CSS 스타일을 적용할 수 있습니다. 우리는 미디어 쿼리를 사용하여 다음 작업을 수행합니다 −
조건부로 스타일을 적용합니다.
특정 형태의 미디어를 타겟팅해야 하는 경우
또는 미디어 상태를 테스트하거나 모니터링해야 할 때
미디어 쿼리를 사용하려면 대상 미디어 유형과 대상 기능을 지정해야 합니다. 또한 논리 연산자를 활용하여 매우 복잡한 미디어 쿼리를 생성할 수도 있습니다. 미디어 쿼리의 의미를 바꾸지 않기 위해 사용할 수도 있는데, 이는 어떤 경우에는 매우 편리할 수 있습니다. 미디어 쿼리의 예를 살펴보겠습니다.
으아아아위 미디어 쿼리는 인쇄형 미디어에만 적용되며, 색상이 검은색으로 변경되고 글꼴 크기가 커집니다.
복잡한 미디어 쿼리의 예가 아래에 나와 있습니다.
으아아아위 쿼리는 크기가 30em 이상이고 가로 방향인 미디어에 적합합니다.
미디어 규칙 −
미디어 유형과 미디어 특성을 지정하는 부분을 흔히 미디어 규칙이라고 합니다.
미디어 규칙에 사용할 수 있는 다양한 논리 연산자는 다음과 같습니다. -
아니요
역시
또는
아래에는 미디어 쿼리를 사용하여 현재 문제를 해결하기 위한 샘플 코드가 나와 있습니다.
으아아아요약하자면 CSS의 미디어 쿼리를 사용하면 더 넓은 특정 뷰포트에서 배경색을 변경할 수 있습니다. 뷰포트의 너비를 지정하고 코드에서 이를 사용하여 특정 뷰포트 크기에 대해 다양한 배경색을 설정하기만 하면 됩니다. 이를 통해 모든 장치 유형과 화면 크기에 최적화된 웹사이트 디자인을 만들 수 있으며, 이는 훌륭한 사용자 경험을 제공하는 데 중요합니다.
위 내용은 CSS에서 특정 더 넓은 뷰포트의 배경색을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
