CSS 미디어 쿼리 가이드

CSS Media Query는 특정 기능, 기능 및 사용자 기본 설정을 기반으로 브라우저를 찾은 다음 스타일을 적용하거나 이러한 기능을 기반으로 다른 코드를 실행하는 기술입니다. 아마도 세계에서 가장 일반적인 미디어 쿼리는 특정 뷰포트 범위를 대상으로하고 맞춤형 스타일을 적용하는 미디어 쿼리 일 것입니다.

 /* 브라우저 너비가 600px 이상인 경우*/
@Media 화면 및 (min-width : 600px) {
  .요소 {
    /* 스타일 적용*/
  }
}

뷰포트 너비 외에도 다른 많은 측면을 배치 할 수 있습니다. 이것은 화면 해상도, 장치 방향, 운영 체제 환경 설정 및 쿼리 및 스타일 컨텐츠에 사용할 수있는 다른 요소 세트 일 수 있습니다.

휴대폰, 태블릿 및 랩톱과 같은 표준 장치의 뷰포트를 기반으로 미디어 쿼리 목록을 빠르게 보려고합니까? 코드 스 니펫 세트를 확인하십시오.

미디어 쿼리 사용

미디어 쿼리는 일반적으로 CSS와 관련이 있지만 HTML 및 JavaScript에서도 사용할 수도 있습니다.

HTML

HTML에서 직접 미디어 쿼리를 사용할 수있는 몇 가지 방법이 있습니다.

<link> 요소는 문서에 직접 배치 할 수 있습니다. 이 예에서는 브라우저에 다른 뷰포트 크기에 다른 스타일 시트를 사용하려고합니다.

<link href="all.css" media="all" rel="stylesheet">
<link href="small.css" media="(min-width: 20em)" rel="stylesheet">
<link href="medium.css" media="(min-width: 64em)" rel="stylesheet">
<link href="large.css" media="(min-width: 90em)" rel="stylesheet">
<link href="extra-large.css" media="(min-width: 120em)" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

왜 이렇게합니까? 이것은 다운로드 및 서비스가 필요한 장치에 맞는 방식으로 스타일을 분리하여 웹 사이트의 성능을 미세 조정하는 좋은 방법입니다.

그러나 이것이 이러한 미디어 쿼리와 일치하지 않는 스타일 시트 다운로드를 항상 방해하는 것은 아니라는 것이 분명합니다. 단순히로드 우선 순위가 낮습니다.

따라서 전화와 같은 작은 화면 장치가 웹 사이트를 방문하는 경우 뷰포트 크기와 일치하는 미디어 쿼리에서 스타일 시트 만 다운로드합니다. 그러나 더 큰 데스크톱 화면이 나타나면 모든 스타일이 모든 쿼리와 일치하기 때문에 모든 스타일 시트를 다운로드합니다 (이 특정 예에서는 인쇄 쿼리를 빼냅니다).

이것은 단지입니다<link> 요소. 반응 형 이미지 안내서가 설명 하듯이 요소에 미디어 쿼리를 사용할 수 있으며, 이는 일련의 이미지 옵션에서 어떤 이미지를 사용해야하는지 요소 브라우저에 알려줍니다.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174353857438221.png" class="lazy" alt="CSS 미디어 쿼리 가이드">

다시 말하지만, 더 작은 장치에 작은 이미지를 제공 할 수 있기 때문에 성능을 향상시킬 수 있습니다. 아마도 데이터 계획에 의해 제한 될 수있는 저전력 장치 일 수 있습니다.

그리고 잊지 말자, 우리는 또한 직접<img src="/static/imghw/default1.png" data-src="cat.png" class="lazy" alt="CSS 미디어 쿼리 가이드" > 요소에서 미디어 쿼리 사용 :

<img src="/static/imghw/default1.png" data-src="cat.png" class="lazy" alt="어두운 비행가 선글라스가있는 캘리코 고양이." srcset="cat-small.png 300w, cat-medium.png 600w, cat-large.png 1200w" sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px">

CSS

마찬가지로 CSS는 실제 애플리케이션에서 미디어 쿼리를 찾는 가장 일반적인 장소입니다. 이들은 스타일 시트의 @media 규칙에 직접 위치하고 있으며 브라우저가 이러한 조건과 일치 할 때 조건을 사용하여 요소를 감싸서 스타일 세트가 언제 어디서 적용되는지 결정합니다.

 /* 320px와 480px 사이의 너비를 가진 뷰포트*/
@Media 전용 화면 및 (Min-Device-Width : 320px) 및 (Max-Device-Width : 480px) {
  .card {
    배경 : #bada55;
  }
}

수입 된 스타일 시트를 범위를 범할 수도 있지만 일반적으로 @import 사용은 제대로 작동하지 않기 때문에 사용하지 않아야합니다.

 /* 가능한 한 @import를 사용하지 마십시오! */

/* 모든 화면의 기본 스타일*/
@import url ( "Style.css") 화면;
/* 초상화 스타일 (좁은) 방향 화면*/
@import url ( 'landscape.css') 화면 및 (방향 : 초상화);
/* 인쇄 스타일*/
@import url ( "print.css") 인쇄;

자바 스크립트

JavaScript에서 미디어 쿼리를 사용할 수도 있습니다! 뭐야? 그들은 CSS와 매우 유사하게 작동합니다. 차이점은? 먼저 window.matchMedia() 메소드를 사용하여 조건을 정의합니다.

따라서 브라우저 너비가 768px 이상인 경우 메시지를 콘솔에 로그인한다고 가정 해 봅시다. matchMedia() 호출하고 화면 너비를 정의하는 상수를 만들 수 있습니다.

 // 너비가 768px const mediaquery = wind

그런 다음이 조건이 충족되면 레코드를 콘솔로 트리거 할 수 있습니다.

 // 너비가 768px const mediaquery = wind

//`matches '속성에 주목하십시오. if (mediaquery.matches) {
  Console.log ( '미디어 쿼리 매치!');
}

불행히도 이것은 한 번만 발사되므로 알람이 꺼지면 화면 너비를 변경하고 새로 고침없이 다시 시도하면 다시 시작되지 않습니다. 이것이 청취자를 사용하여 업데이트를 확인하는 것이 가장 좋습니다.

 // 너비가 768px const mediaquery = wind

함수 handletableTchange (e) {
  // 미디어 쿼리가 true인지 확인하십시오 (e.matches) {
    // 그런 다음 다음 메시지를 console.log에 로그인합니다 ( 'Media Query Match!');
  }
}

// 이벤트 리스너 MediaQuery.AddListener (HandleTableTchange) 등록;

// 초기 점검 핸들 라치 네치 (MediaQuery);

미디어 쿼리를 사용하여 이전 JavaScript 메소드의 비교와 (이벤트 리스너 resize 조정, 확인 window.innerHeight window.innerWidth 에 대한 "JavaScript Media Query 사용"에 대한 Marko ILIC의 전체 기사를 확인하십시오.

### 미디어 쿼리의 구조

이제 우리는 미디어 쿼리를 사용할 수있는 곳에 대한 몇 가지 예를 보았으므로 분해하고 실제로 무엇을하고 있는지 보자.

@메디아

 @Media [Media-Type] ([Media-Feature]) {
  /* 스타일! */
}

미디어 쿼리 레시피의 첫 번째 성분은 @media 규칙 자체이며, 이는 많은 CSS AT-RULES 중 하나입니다. @media 왜 그렇게 많은 관심을 받습니까? 웹 사이트 시청에 사용되는 미디어 유형 , 해당 미디어 유형에서 지원하는 기능 및 간단하고 복잡한 조건을 혼합하고 일치시키기 위해 결합 할 수있는 운영자를 대상으로합니다.

미디어 유형

 @Media 화면 {
  /* 스타일! */
}

우리는 어떤 유형의 미디어를 찾으려고합니까? 대부분의 경우 대부분의 경우 여기에 screen 값이 표시됩니다. 우리가 일치시키려는 많은 미디어 유형은 화면 연결 장치이기 때문에 의미가 있습니다.

그러나 화면은 우리가 찾을 수있는 유일한 미디어 유형은 아닙니다. 우리는 다음을 포함하여 일부가 있습니다.

• all : 모든 장치와 일치합니다
• print : 인쇄 미리보기에서 볼 수있는 문서 나 인쇄되도록 설계된 페이지로 컨텐츠를 분해하는 미디어와 일치합니다.
• screen : 장치를 화면과 일치시킵니다
• speech : 스크린 리더와 같이 콘텐츠를 건전한 방식으로 읽는 장치와 일치합니다. 셀프 메디아 쿼리 레벨 4 이후, 이는 현재 더 이상 사용되지 않은 aural 유형을 대체했습니다.

화면에서 인쇄 스타일을 미리 보려면 모든 주요 브라우저는 DevTools를 사용하여 인쇄 스타일 시트의 출력을 시뮬레이션 할 수 있습니다. 다른 미디어 유형 (예 : tty , tv , projection , handheld , braille , embossed 및 aural )과 같은 다른 미디어 유형은 더 이상 사용되지 않았으며, 사양은 브라우저가이를 인식 할 것을 계속 권장하지만 비어있는 것으로 평가해야합니다. 이 중 하나를 사용하는 경우 현대적인 접근 방식으로 변경하십시오.

미디어 기능

일치하도록 미디어 유형을 정의하면 기능을 정의 할 수 있습니다. 우리는 화면 screen 유형 인 폭을 넓은 화면의 많은 예를 살펴 보았으며, min-width 과 max-width 특정 값의 속성 입니다.

그러나 우리가 일치 할 수있는 많은 (많은) "기능"이 있습니다! 미디어 쿼리 레벨 5 미디어 기능을 6 가지 범주로 분류합니다.

뷰포트/페이지 기능

디스플레이 품질

색상

상호 작용

비디오 접두사

사양은 텔레비전을 포함한 사용자 에이전트를 참조하여 각각 고유 한 특성을 가진 두 개의 비행기에 비디오 및 그래픽을 제시합니다. 다음 특징은이 비행기를 설명합니다.

스크립트

사용자 선호도

더 이상 사용되지 않았습니다

운영자

미디어 쿼리는 많은 프로그래밍 언어의 논리 연산자를 지원하므로 특정 조건에 따라 미디어 유형을 일치시킬 수 있습니다. @media 규칙 자체는 기본적으로 다음 유형과 속성이 일치한다고 선언 한 다음 일부 작업을 수행하는 논리 연산자입니다.

그리고

그러나 특정 너비 범위 내에서 화면을 찾으려면 and 연산자를 사용할 수 있습니다.

 /* 320px에서 768px 사이의 너비를 가진 화면 일치*/
@Media 화면 (min-width : 320px) 및 (Max-Width : 768px) {
  .요소 {
    /* 스타일! */
  }
}

또는 (또는 쉼표 분리)

우리는 또한 다른 기능과 일치하기 위해 쉼표로 구분 된 기능을 or 연산자로 사용할 수 있습니다.

 /*
  최소 1200px*/의 다크 모드 또는 화면 너비에 대한 사용자의 선호도와 일치합니다.
@Media 화면 (Color-Scheme를 선호합니다 : Dark), (min-width : 1200px) {
  .요소 {
    /* 스타일! */
  }
}

아니다

어쩌면 우리는 장치가 지원하지 않거나 일치하지 않는 것에 의해 장치를 찾기를 원할 수도 있습니다. 이 명령문은 장치가 프린터 일 때 신체의 배경색을 제거하고 하나의 색상 만 표시 할 수 있습니다.

 @Media print and (not (color)) {
  몸 {
    배경색 : 없음;
  }
}

더 깊은 이해를 원하십니까? 미디어 쿼리 구문을 따르는 더 많은 예를 보려면 DigitalOcean 커뮤니티의 "CSS 미디어 쿼리 : 빠른 참조 및 가이드"를 확인하십시오.

CSS 미디어 쿼리가 정말로 필요합니까?

미디어 쿼리는 흥미 진진한 숨겨진 보석이있는 CSS 도구 상자의 강력한 도구입니다. 그러나 각 상황의 디자인에 적응하면 유지하기가 지나치게 복잡한 코드 기반으로 끝나고, 우리 모두가 알다시피, CSS는 곰 새끼와 같지만 귀엽고 무해하지만 자라면 먹습니다.

그렇기 때문에 Ranald Mace의 Universal Design Philosophy를 따르는 것이 좋습니다. " 구체적으로 적응하거나 설계하지 않고 가능한 한 모든 사람이 사용할 제품을 설계하는 것"입니다.

Laura Kalbag는 "모든 사람이 접근하기 쉬운"에서 접근성과 보편적 인 디자인의 차이는 미묘하지만 중요하다고 설명합니다. 접근 가능한 디자이너는 휠체어 사용자가 액세스 할 수있는 대형 문을 만들고 일반 디자이너는 자신의 능력에 관계없이 누구나 적응할 수있는 입구를 만듭니다.

나는 웹에서 보편적 인 디자인에 대해 이야기하기가 어렵고 거의 유토피아 적으로 들리지만, 그것에 대해 생각하면, 약 150 개의 다른 브라우저, 약 50 가지의 사용자 선호도 조합이 있으며 앞에서 언급했듯이 Android 장치에만 24,000 개가 넘는 고유 한 장치가 있습니다.

이는 콘텐츠를 표시 할 수있는 최소 1,800 만 건의 가능한 시나리오를 의미합니다. 멋진 Miriam Suzanne의 말에 따르면, CSS는 운영 체제, 인터페이스 및 무한한 캔버스의 언어를 통해 알려지지 않은 컨텐츠의 그래픽 디자인을 시도하고 있습니다. 우리 중 누구도 우리가 무엇을하고 있는지 알 수 없습니다. "

그렇기 때문에 가정이 매우 위험한 이유이므로 제품을 설계, 개발 및 고려할 때 가정을 제쳐두고 미디어 쿼리를 사용하여 연락처 및 사용자 앞에서 콘텐츠가 올바르게 표시되도록합니다.

값의 일치 범위

width , height , color 및 color-index 포함하여 이전 섹션에 요약 된 많은 미디어 기능은 최소 또는 최대 제약 조건을 나타 내기 위해 min- 또는 max- 로 접두사를 만들 수 있습니다. 우리는 많은 예에서 이러한 사용법을 보았지만 핵심은 특정 값을 선언하지 않고 일치하는 다양한 값을 만들 수 있다는 것입니다.

다음 코드 스 니펫에서 뷰포트 너비가 30em보다 크고 80em 미만인 경우 본체의 배경색을 자주색으로 설정했습니다. 뷰포트 너비가 값 범위와 일치하지 않으면 다시 흰색으로 떨어집니다.

 몸 {
  배경색 : #fff;
}

@Media (min-width : 30em) 및 (max-width : 80em) {
  몸 {
    배경색 : 자주색;
  }
}

미디어 쿼리 레벨 4는 less than( 및 <code>equals(=) 연산자를 사용하여 새로운 단순화 된 구문을 지정합니다. 따라서 마지막 예제는 다음과 같은 새로운 구문으로 변환 될 수 있습니다.

 @Media (width> = 30em) 및 (너비 <p></p><h3 id="중첩되고-복잡한-의사-결정"> 중첩되고 복잡한 의사 결정</h3><p></p><p> CSS를 사용하면 괄호를 사용하여 At-Rules 또는 Group 문을 둥지로써 복잡한 작업을 깊이 평가할 수 있습니다.</p><pre class="brush:php;toolbar:false"> @Media (min-width : 20em), 전부가 아니고 (Min-Height : 40em) {  
  @Media 전부는 아니고 (포인터 : 없음) {...}
  @Media 화면 및 ((min-width : 50em) 및 (방향 : landscape)), print and (color)) {...}
}

주의 깊은! 강력하고 복잡한 표현을 만들 수 있더라도 매우 임의적이고 유지하기가 어려울 수 있습니다. 브래드 프로스트 (Brad Frost)는“인터페이스가 더 복잡할수록 제대로 유지하기 위해 더 많이 생각해야합니다.”

보조 기능

미디어 쿼리 레벨 4에 추가 된 많은 기능은 접근성에 중점을 둡니다.

감소 된 모션을 선호합니다

prefers-reduced-motion 사용자가 움직임 선호도가 감소하여 움직임 수와 애니메이션 수를 최소화하는지 여부를 감지합니다. 두 가지 값이 필요합니다.

 <code>- no-preference：指示用户没有向系统告知任何偏好。 - reduce：指示用户已通知系统他们更喜欢最大限度地减少移动或动画数量的界面，最好是消除所有非必要的移动。此偏好通常由患有前庭障碍或眩晕症的人使用，其中不同的运动会导致失去平衡、偏头痛、恶心或听力损失。如果您曾经尝试快速旋转并感到头晕，您就会知道感觉如何。在Eric Bailey 的一篇精彩文章中，他建议使用以下代码停止所有动画： ```css @media screen and (prefers-reduced-motion: reduce) { * { /* 非常短的持续时间意味着依赖事件的JavaScript 仍然有效*/ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }</code>

Bootstrap과 같은 인기있는 프레임 워크에는 기본적 으로이 기능이 있습니다. 제 생각에는 prefers-reduced-motion 사용하지 않을 이유가 없습니다.

대비를 선호합니다

prefers-contrast 기능은 대비를 증가 시키거나 감소시키기 위해 기본 설정 및 브라우저 설정이 선택되었는지 여부를 사용자에게 알려줍니다. 세 가지 값이 필요합니다.

• 예비 회의 : 사용자가 기본 설정을 시스템에 알리지 않는 경우. 부울으로 사용하면 false 로 평가됩니다.
• 높음 : 사용자가 더 높은 대비 레벨을 표시하도록 선택하면.
• 낮음 : 사용자가 더 낮은 대비 레벨을 표시하도록 선택할 때.

글을 쓰는 시점 에서이 기능은 브라우저에서 지원되지 않습니다. Microsoft는 비표준 초기 구현을 사용하여 -ms-high-contrast 기능과 함께 작동합니다.이 기능은 Microsoft Edge v18 이상에서만 사용할 수 있지만 크롬 기반 버전은 포함되지 않습니다.

 .Button {
  배경색 : #0958D8;
  색상 : #ffff;
}

@Media (프리터링 대응 : High) {
  .Button {
    배경색 : #0A0DB7;
  }
}

이 예제는 사용자가 높은 대비를 켜면 button 클래스의 대비를 AA에서 AA로 제기합니다.

거꾸로 된 색

inverted-colors 기능은 사용자에게 시스템 환경 설정 또는 브라우저 설정에서 색상이 반전되도록 선택되었는지 여부를 알려줍니다. 때때로이 옵션은 높은 대비의 대안으로 사용됩니다. 두 가지 값이 필요합니다.

• 없음 : 색상이 정상적으로 표시되는 경우
• 반전 : 사용자가 반전 색상 옵션을 선택할 때

색상을 뒤집는 문제는 이미지와 비디오의 색상을 뒤집어 X- 레이 이미지처럼 보이게한다는 것입니다. CSS invert 필터를 사용하면 모든 이미지와 비디오를 선택하고 다시 반전 할 수 있습니다.

 @Media (거꾸로 된 색) {
  IMG, 비디오 { 
    필터 : 반전 (100%);
  }
}

글을 쓰는 시점 에서이 기능은 Safari에서만 지원됩니다.

컬러 스키 밍을 선호합니다

오늘날 우리는 점점 더 "다크 모드"색 구성표를보고 있으며, prefers-color-scheme 기능 덕분에 사용자의 시스템 또는 브라우저 기본 설정을 활용하여 선호도에 따라 "어두운"또는 "가벼운"테마를 제공 해야하는지 여부를 결정할 수 있습니다.

두 가지 값이 필요합니다.

• Light : 사용자가 선택한 경우 라이트 테마를 선호하거나 활동 선호도가 없습니다.
• DARK : 사용자가 설정에서 어두운 디스플레이를 선택할 때

 몸 {
  -BG-Color : 흰색; 
  -text-color : 검은 색;

  배경색 : var (-bg-color);
  색상 : var (-Text-Color);
}

@Media 화면 및 (Color-Scheme : Dark) {
  몸 {
    -BG-Color : 검은 색;
    -text-color : 흰색;
  }
}

Adhuham이 다크 모드에 대한 완전한 가이드에서 설명 하듯이 배경색을 바꾸는 것 이상입니다. Dark Mode를 사용하기 전에 매우 현명한 구현 전략이 없다면 유지하기가 어려운 매우 어려운 코드 기반이 될 수 있습니다. CSS 변수는 이에 대한 놀라운 일을 할 수 있지만 이것은 다른 게시물의 주제가 될 것입니다.

미래의 전망

미디어 쿼리 레벨 5는 현재 초안 상태에 있으며 현재 사이에 많은 변화가 발생할 수 있으며 제안이됩니다. 그러나 여기에는 화면을 배치하고 디자인을 매우 구체적인 조건에 맞게 조정하는 새로운 방법을 열면서 언급할만한 흥미로운 기능이 포함되어 있습니다.

사용자 선호 미디어 기능

이봐, 우리는 방금 마지막 섹션에서 이것들을 소개했다! 괜찮은. 이러한 기능은 사용자 에이전트 또는 운영 체제 수준에서 나온 경우 사용자의 실제 설정에 의해 알려져 있기 때문에 흥미 롭습니다.

필수 색상 팔레트를 감지하십시오

이것은 매우 간단합니다. 일부 브라우저는 스타일 렌더링에 사용 가능한 색상 수를 제한합니다. 이를 "강제 색상 모드"라고하며 브라우저 설정에서 활성화 된 경우 사용자는 페이지에서 제한된 색상 세트를 사용할 수 있습니다. 따라서 사용자는 색상 조합과 대비를 정의하여 콘텐츠를 쉽게 읽을 수 있습니다.

forced-colors 기능을 사용하면 active 값을 사용하여 필수 색상 팔레트가 사용되는지 여부를 감지 할 수 있습니다. 일치하는 경우 브라우저는 CSS 시스템 색상을 통해 필요한 팔레트를 제공해야합니다. 브라우저는 또한 페이지의 배경색이 밝은지 어두운 지 여부를 결정할 수 있으며, 적절한 경우 해당 prefers-color-scheme 값을 트리거하여 페이지를 조정할 수 있도록합니다.

최대 밝기, 색 깊이 및 대비 비율을 감지하십시오

일부 장치 (및 브라우저)는 매우 밝은 디스플레이를 표시하고 색상간에 광범위한 색상 및 높은 대비 비율을 나타낼 수 있습니다. high 키워드가 이러한 장치와 일치하고 standard 다른 모든 장치와 일치하는 dynamic-range 기능을 사용하여 이러한 장치를 감지 할 수 있습니다.

우리는 지금처럼 높은 밝기와 대비를 구성하는 측정에 대한 불확실성이 여전히 남아있을 수 있습니다. 브라우저 가이 결정을 내릴 수 있습니다.

비디오 접두사 특성

이 사양은 별도의 "평면"에 비디오 및 그래픽을 표시 할 수있는 일부 화면 (예 : TV)에 대해 설명하며 화면의 다른 요소와 비디오 프레임을 구별하는 방법 일 수 있습니다. 따라서 미디어 쿼리 레벨 5는 색 영역 및 동적 범위를 포함한 비디오 기능을 감지하도록 설계된 새로운 미디어 기능 세트를 제안합니다.

비디오 높이, 너비 및 해결책을 감지하는 것에 대한 제안도 있지만 배심원은 여전히 ​​비디오를 해결하는 올바른 방법인지 논의하고 있습니다.

브라우저 지원

이 기사를 읽을 때이 기능에 대한 브라우저 지원이 변경 될 수 있으므로 브라우저는 지속적으로 발전하고 있습니다. MDN 업데이트 된 브라우저 호환성 테이블을 확인하십시오.

컨테이너 쿼리에 대한 지침

브라우저의 크기가 아닌 자체 크기에 따라 구성 요소를 조정할 수 있다면 시원하지 않습니까? 이것이 CSS 컨테이너 쿼리의 개념입니다. 우리는 현재 미디어 쿼리를 통해 이러한 변경을 수행 할 브라우저 화면 만 가지고 있습니다.

뷰포트가 항상 요소 자체의 크기와 직접 관련되어 있지 않기 때문에 이것은 불행한 일입니다. 웹 사이트의 여러 컨텍스트에서 렌더링 된 위젯을 상상해보십시오. 때로는 사이드 바, 때로는 전체 너비 바닥 글에, 때로는 알 수없는 열이있는 그리드에 있습니다.

이것은 컨테이너 쿼리가 해결하려는 문제입니다. 이상적으로는 뷰포트의 크기보다는 요소 자체의 크기에 따라 요소 스타일을 조정할 수 있습니다. Chrome 105는 CSS 컨테이너 쿼리를 지원합니다. 사파리 16.1도 마찬가지입니다. 글을 쓰는 시점에서 우리가 정말로 기다리는 것은 Firefox의 광범위한 지원입니다.

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿 PC

### 예

미디어 쿼리 예제를 살펴 보겠습니다. 미디어 유형, 기능 및 운영자의 많은 조합으로 인해 우리가 표시 할 수있는 가능성의 수는 철저합니다. 대신 특정 미디어 기능을 기반으로 일부를 강조 할 것입니다.

다른 뷰포트 너비에서 레이아웃을 조정하십시오

더 많은 정보

이것은 아마도 가장 널리 사용되는 미디어 기능 일 것입니다. 스크롤 바를 포함하여 뷰포트의 너비를 브라우저에 알려줍니다. Ethan Marcotte의 유명한 반응 형 디자인 의 CSS 구현을 잠금 해제합니다. 유체 메쉬, 유연한 이미지 및 반응 형 타이포그래피를 결합하여 뷰포트 크기에 응답하는 설계 프로세스.

나중에 Luke Wroblewski는 모바일 우선 순위라는 용어를 도입하여 디자이너와 개발자가 먼저 작은 화면 경험으로 시작한 다음 화면 폭과 장치 기능이 확장됨에 따라 경험을 점차적으로 향상 시켜서 반응 형 디자인의 개념을 개발했습니다.

모바일 우선 순위는 일반적으로 max-width min-width Width를 사용하여 찾을 수 있습니다. 우리가 min-width 로 시작하면 기본적으로 "이봐, 브라우저, 여기서 일하라." 반면, max-width 더 큰 화면을 우선시하는 것과 같습니다.

브레이크 포인트를 너비로 정의하는 한 가지 방법은 iPhone의 정확한 픽셀 너비와 같은 표준 장치의 크기를 사용하는 것입니다. 그러나 많은 (많은) 다른 전화, 태블릿, 노트북 및 데스크탑이 있습니다. 2015 년 8 월 현재 Android 단독을 살펴보면 뷰포트 크기, 해상도, 운영 체제 및 브라우저의 24,000 개 이상의 변형이있었습니다.

따라서 특정 장치의 정확한 너비는 문제 해결 또는 일회성 수정에 도움이 될 수 있지만 이는 반응 형 아키텍처를 유지하기위한 가장 신뢰할 수있는 솔루션이 아닐 수 있습니다. 이것은 결코 새로운 아이디어가 아닙니다. 브래드 프로스트 (Brad Frost)는 이미 2013 년 포스트 (7 가지 효율적인 미디어 쿼리 습관”에서 컨텐츠 (장치가 아닌)가 중단 점을 결정하게하는 장점을 이미 홍보했습니다.

미디어 쿼리는 여전히 반응 형 인터페이스를 만드는 효과적인 도구이지만 많은 경우 폭을 완전히 피할 수 있습니다. 최신 CSS를 사용하면 CSS 그리드를 사용하여 유연한 레이아웃을 만들고 컨텐츠를 중단 점을 추가하지 않고도 뷰포트 크기에 적용 할 수 있습니다. 예를 들어, 이것은 미디어 쿼리없이 몇 개의 열을 조정하는 그리드 레이아웃입니다.

 .Container {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (자동 필, minmax (200px, 1fr));
}

너비 너머의 사고에 관한 기사가 많이 있습니다. 나는 몇 년 전에 이것을 썼으며 Una Kravet의 기사를 "CSS 한 줄에있는 10 개의 현대 레이아웃"이라는 기사를 확인하는 것이 좋습니다.

#### Dark Mode

더 많은 정보

이 예제는 네트워크의 다크 모드에 대한 가이드에서 직접 가져옵니다. 아이디어는 prefers-color-scheme 기능을 사용하여 사용자의 시스템 설정이 명확 또는 다크 모드에서 구성되어 있는지 여부를 감지 한 다음 렌더링 된 UI에 대한 대체 색상 세트를 정의 할 수 있다는 것입니다.

이 기술을 CSS 사용자 정의 속성과 결합하면 한 번만 정의 한 다음 코드 전체에서 사용하는 변수와 유사하기 때문에 더 쉬워집니다. 색상을 교환해야합니까? 사용자 정의 속성 값을 변경하면 어디서나 업데이트됩니다. 이것이 바로 prefers-color-scheme 일입니다. 색상 세트를 사용자 정의 속성으로 정의한 다음 prefer-color-scheme 속성을 사용하여 사용자 설정을 기반으로 색상을 변경하여 미디어 쿼리로 재정의합니다.

#### 반응 형 카드 라이브러리의 방향, 호버 및 동작 감지

더 많은 정보

이 갤러리는 반응이 좋으며 너비 기능을 사용하지 않아도됩니다.

뷰포트의 방향을 감지합니다. 초상화 뷰포트라면 사이드 바가 제목이됩니다. 그것이 풍경이라면 측면에 남아 있습니다.

pointer 미디어 기능을 사용하면 메인 입력 장치가 거칠고 (예 : 손가락) 또는 미세 (예 : 마우스 커서)가 확인란의 클릭 가능 영역의 크기를 설정하는지 여부를 결정합니다.

그런 다음 hover 미디어 기능을 사용하여 예제는 장치가 마우스 커서와 같은 호버링 할 수 있는지 확인하고 각 카드의 확인란을 표시합니다.

prefers-reduced-motion reduce 애니메이션이 제거됩니다.

뭔가 알아 차렸어? 실제로 실제 레이아웃과 카드 크기에 미디어 쿼리를 사용 하지 않습니다 ! 이는 .container 요소의 minmax() 함수를 사용하여 처리하여 응답 디자인이 항상 미디어 쿼리를 사용하는 것은 아니라는 것을 보여줍니다.

요컨대, 이것은 너비를 측정하거나 가정하지 않고 완전히 반응 형 애플리케이션입니다.

#### iPhone을 조경 모드로 포지셔닝합니다

 /* iPhone X 조경 모드*/
@Media 전용 화면 
  및 (Min-Device-Width : 375px) 
  그리고 (Max-Device-Width : 812px) 
  그리고 (-webkit-min-device-pixel-ratio : 3)
  그리고 (오리엔테이션 : 풍경) { 
  /* 스타일! */
}

더 많은 정보

orientation 배지 특징은 장치가 넓은 방향 (측면 방향) 또는 높은 방향 (수직 방향)으로 회전하는지 여부를 테스트합니다.

미디어 쿼리는 어떤 장치가 사용되는지 정확히 알지 못하지만 특정 장치의 정확한 크기를 사용할 수 있습니다. 위의 코드 스 니펫은 iPhone X를 대상으로합니다.

#### 큰 뷰포트에 스티커 타이틀을 적용하십시오

더 많은 정보

위의 예에서는 height 사용하여 고정 요소를 분리하고 화면이 너무 짧을 때 너무 많은 화면 공간을 차지하지 않습니다. 화면이 높으면 수평 내비게이션 막대가 고정 된 위치에 있지만 더 짧은 화면에서 분리됩니다.

width 기능과 마찬가지로 height 스크롤 바를 포함한 뷰포트의 높이를 감지합니다. 우리 중 많은 사람들이 좁은 뷰포트가있는 소형 장치에서 웹 페이지를 탐색하여 다른 높이를위한 디자인이 그 어느 때보 다 중요합니다. Anthony Colangelo는 Apple이 뷰포트 높이가 변경 될 때 영웅 이미지의 크기를 처리하기 위해 의미있는 방법으로 height 미디어 기능을 사용하는 방법을 설명합니다.

#### 반응 형 (유체) 조판

더 많은 정보

글꼴이 표시된 화면의 화면 크기에 따라 너무 크거나 작게 보일 수 있습니다. 작은 화면에서 작업하면 더 큰 화면에서 사용되는 글꼴보다 작은 글꼴을 사용하고 싶을 것입니다.

여기서 아이디어는 브라우저의 너비를 사용하여 글꼴 크기를 확장한다는 것입니다. 우리는 있습니다 기본 글꼴 크기를 "작은"글꼴 크기로 설정 한 다음 미디어 쿼리를 "큰"글꼴 크기로 사용하여 다른 글꼴 크기를 설정하십시오. 중간에? 글꼴 크기를 다시 설정했지만 브라우저 너비를 기준으로 크기를 계산하는 다른 미디어 쿼리에서.

이것의 아름다움은 브라우저 너비에 따라 글꼴 크기를 조정할 수 있지만 특정 크기보다 낮거나 떨어지지 않는다는 것입니다. 그러나 min() , max() 및 clamp() 와 같은 최신 CSS 기능 덕분에 미디어 쿼리 없이는 더 쉬운 방법이 있습니다.

####은 장치에 두꺼운 포인터가있을 때 더 큰 터치 대상을 제공합니다.

더 많은 정보

매우 작은 버튼이있는 웹 사이트를 방문한 적이 있습니까? 우리 중 일부는 두꺼운 손가락을 가지고 있으며 실수로 다른 것을 클릭하지 않고도 물체를 정확하게 클릭하기가 어렵습니다.

물론, 우리는 width 기능에 의존하여 작은 화면에서 작업 중인지 알 수 있지만 장치가 요소 위로 떠날 수 있는지 여부를 감지 할 수도 있습니다. 그렇지 않은 경우 터치 장치 일 수도 있고 Microsoft Surface와 같은 두 장치를 지원하는 장치 일 수 있습니다.

위의 데모는 확인란을 예로 사용합니다. 작은 화면에서 확인란을 볼 때 확인란을 클릭하기가 어려울 수 있으므로 장치가 호버 이벤트를 수행하지 않으면 크기가 증가하고 호버링 할 필요가 없습니다.

다시 말하지만,이 접근법은 항상 정확한 것은 아닙니다. hover , pointer , any-hover 및 any-pointer 사용할 때 발생할 수있는 문제에 대한 Patrick Lauke의 자세한 기사를 참조하십시오.

### 사양

• 미디어 쿼리 레벨 4 (권장 할 수없는 권장)
• 미디어 쿼리 레벨 5 (작업 초안)

이 가이드를 검토 한 도움을 준 Sarah Rambacher에게 특별한 감사를드립니다.

위 내용은 CSS 미디어 쿼리 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!