미디어 쿼리에서 '화면'과 '화면만'의 차이점은 무엇인가요?
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 요소의 디자인 차이를 관찰할 수 있습니다.
으아악미디어 쿼리에서 화면만 보이는 것과 화면만 보이는 것의 차이점은 무엇인가요?
여기에서는 차이 테이블에서 미디어 쿼리에서 화면만과 화면만 차이를 설명했습니다.
Property | 的中文翻译为:属性 | “화면” 媒体类型 | “화면만” 媒体类型 |
Syntax | 的中文翻译为:语法 | @media screen { /* CSS 코드 */ } | @미디어 전용 화면 { /* CSS代码 */ } |
目标 | 它面向所有设备,如智能手机、台式机、平板电脑等。 | 스캐너나 프린터와 같이 미디어 유형과 기능을 지원하지 않는 장치를 제외한 모든 장치를 대상으로 합니다. |
사용자는 '화면' 미디어 유형과 '화면만' 미디어 유형의 차이점을 배웠습니다. 'only' 키워드는 항상 'only' 키워드를 무시하므로 최신 브라우저에는 영향을 미치지 않지만, 이전 브라우저 버전에는 유용합니다.
위 내용은 미디어 쿼리에서 '화면'과 '화면만'의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이 튜토리얼은 Smart Forms 프레임 워크를 사용하여 전문적인 JavaScript 양식을 작성하는 것을 보여줍니다 (참고 : 더 이상 사용할 수 없음). 프레임 워크 자체를 사용할 수 없지만 원칙과 기술은 다른 형태의 건축업자와 관련이 있습니다.

CSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.

이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에

인라인 텍스트 편집기를 구축하는 것은 사소한 일이 아닙니다. 이 프로세스는 대상 요소를 편집 가능하게하여 잠재적 구문 예외를 처리하여 시작합니다. 편집자 생성 이 편집기를 구축하려면 컨텐츠를 동적으로 수정해야합니다.

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

이 튜토리얼은 node.js, express 및 multer를 사용하여 파일 업로드 시스템을 구축함으로써 안내합니다. 단일 및 다중 파일 업로드를 다루고 나중에 검색하기 위해 MongoDB 데이터베이스에 이미지 저장을 보여줍니다. 먼저 Projec을 설정하십시오

이 기사는 Envato Market에서 사용할 수있는 최고의 PHP 양식 빌더 스크립트를 탐색하여 기능, 유연성 및 설계를 비교합니다. 특정 옵션으로 다이빙하기 전에 PHP 양식 빌더가 무엇인지, 왜 사용하는지 이해해 봅시다. PHP 양식
