미디어 쿼리에서 '화면'과 '화면만'의 차이점은 무엇인가요?

CSS에서 미디어 쿼리는 반응형 웹 디자인을 만드는 데 중요한 역할을 하며, 요즘 반응형 디자인은 모든 웹사이트가 방문자를 유치하는 데 필요한 중요한 것 중 하나입니다.

일반적으로 @media CSS 규칙을 사용하여 미디어 쿼리를 작성할 수 있습니다. 그러나 미디어 쿼리에서 다양한 조건과 키워드를 사용하여 다양한 장치를 타겟팅할 수 있습니다. 예를 들어 모바일 장치, 데스크톱 장치, 프린터 화면 등

이 튜토리얼에서는 미디어 쿼리에서 '화면'과 '화면만'의 차이점을 알아봅니다.

什么是媒体查询中的屏幕?

CSS에서는 미디어 쿼리 내에서 'screen' 키워드를 사용하여 태블릿, 모바일, 데스크톱, 프린터, 스크린 리더 등 화면이 있는 모든 장치를 타겟팅합니다.

구문

사용자는 아래 구문에 따라 미디어 쿼리에 screen 키워드를 사용할 수 있습니다.

위 구문에서는 다양한 장치에 대한 중단점을 설정하는 데 조건이 사용됩니다.

예 1

示例 1

아래 예에서는 CSS의 미디어 쿼리와 함께 screen 키워드를 사용했습니다. 'text' 클래스 이름을 포함하는 div 요소가 있습니다.

데스크탑에서는 본체 배경색이 '아쿠아'인데, 화면 크기가 1200px 미만인 기기에서는 '노란색'으로 변경합니다. 또한 1200px 미만의 장치에 대해서는 div 요소의 스타일을 변경합니다.

출력에서 사용자는 브라우저 창의 크기를 변경하고 스타일의 차이를 관찰할 수 있습니다.

媒体查询中唯一的屏幕是什么?

재 CSS中编写媒体查询时,我们还可以使用 "only" 关键字与 "screen"关键字一起使用.当我们使用 "only"匹配媒体类型과 媒体特性时应용媒体查询中的样式。

그러나 이전 브라우저에는 'only' 키워드의 특별한 효과가 있습니다. 예를 들어, 이전 브라우저가 미디어 쿼리 및 미디어 기능을 지원하지 않는다고 가정해 보겠습니다. 이 경우 장치가 미디어 유형 사양과 일치하지 않을 때 미디어 쿼리 블록 내부에 정의된 스타일을 적용해서는 안 됩니다.

그러나 모든 최신 브라우저는 'only' 키워드를 무시합니다.

구문

사용자는 아래 구문에 따라 미디어 쿼리에 'only' 키워드를 사용할 수 있습니다.

예 2

아래 예에서는 5개의 '단일' div 요소가 포함된 '다중' div 요소를 정의했습니다. 우리는 '다중' 및 '단일' div 요소의 스타일을 지정했습니다.

또한 미디어 쿼리를 사용하여 너비가 680픽셀 미만인 장치의 웹페이지 스타일을 지정했습니다. 사용자는 브라우저 창의 크기를 변경하고 단일 div 요소와 다중 div 요소의 디자인 차이를 관찰할 수 있습니다.

미디어 쿼리에서 화면만 보이는 것과 화면만 보이는 것의 차이점은 무엇인가요?

여기에서는 차이 테이블에서 미디어 쿼리에서 화면만과 화면만 차이를 설명했습니다.

사용자는 '화면' 미디어 유형과 '화면만' 미디어 유형의 차이점을 배웠습니다. 'only' 키워드는 항상 'only' 키워드를 무시하므로 최신 브라우저에는 영향을 미치지 않지만, 이전 브라우저 버전에는 유용합니다.

위 내용은 미디어 쿼리에서 '화면'과 '화면만'의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!