CSS 미디어 질의

인터넷 사용자는 각종 설비를 통해 인터넷을 방문하는데 데스크톱, 태블릿PC, 휴대전화(고급과 소형폰)부터 보조기술까지 다양하다.
화면 크기, 브라우저 뷰포트, 해상도, 장치 유형이 다르기 때문에 이 장치를 수용할 수 있는 사이트를 설계하는 것은 어려운 작업일 수 있다.
이 작업을 쉽게 할 수 있는 특수한 CSS 기능이 있습니다. 잘하면 대부분의 웹 사이트를 방문하는 장치가 적당한 사용자 체험을 얻을 수 있습니다.
매체 조회를 소개하다.글자상으로'매체'라는 단어는 설비를 가리키고,'조회'는 본고에서 이 설비에 사용할 코드를 가리킨다.
이 글은 소개로 삼을 것입니다. 그 중에서 얻은 지식은 발판이 될 것입니다. 당신은 이를 바탕으로 이 시리즈의 마지막 프로젝트에 큰 도움이 될 것입니다.
본고는 다음과 같은 코드 부분을 사용하고 이를 수정할 것이다.코드 세그먼트를 .html 및 .css 확장자로 각각 저장하고 CSS 파일이 HTML과 연결되어 있는지 확인하십시오.모든 HTML 세션은 HTML의 시작과 끝 body 태그 사이에 놓여야 한다는 것을 명심하세요.

<header>
  <h1>CSS MEDIA QUERIES</h1>
</header>
<main>
  <h1>Hello world</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</main>

/*
 * Nothing sophisticated the codes are just cosmetics
*/

header {
  padding: 1.2em;
  text-align: center;
  background-color: #1560bd;
  color: #ffffff;
}

main {
  background-color: #dddddd;
  padding: 1.2em;
  border: 5px solid #1560bd;
}

p {
  font-size: 1.2em;
  color: black;
}

모든 캡처는 Firefox 70 웹 브라우저와 개발 도구에서 제공됩니다.
이게 있으면 시작합시다.
미디어 조회는 장치 유형이나 특징에 따라 사이트나 웹 응용 프로그램을 수정하는 데 사용됩니다.
그것들은 서로 다른 용례가 있지만, 가장 흔히 볼 수 있는 용례는호응성 설계.응답식 디자인은 장치 화면의 크기나 방향에 따라 사이트의 레이아웃을 바꾸는 것이다.
우리는 우리가 겨냥할 수 있는 미디어 유형과 그들의 특징을 미디어 특성이라고도 부른다.
미디어 유형부터 시작합시다.

미디어 유형

미디어 조회가 대상으로 할 수 있는 장치 종류는 네 종류로 나눌 수 있다.기술적으로 말하자면, 이런 유형들을 미디어 유형이라고 부른다.그들은 다음과 같습니다.

all - 모든 장치에 적용됩니다

print - 사용자가 인쇄한 문서에 적용됩니다

screen - 주로 스크린 컴퓨터 및 휴대용 장치

speech - 음성 합성기

이제 우리는 우리가 직면해야 할 장치의 종류를 알게 되었고, 다음은 어떻게 미디어 조회를 실제로 사용하는지 알게 되었다.
다음 방법 중 하나를 사용하여 HTML 문서에 미디어 질의를 적용할 수 있습니다.

media및style표시

의link속성을 통해

CSS 파일

에서 사용@media 규칙
지금은 코드를 작성할 때다.그러나 먼저 브라우저에 HTML을 로드합니다.

코드 편집기로 돌아가면 media 태그에 style 속성을 적용하여 h1 을 숨깁니다.
HTMLhead 태그에 다음을 추가합니다.

<style media="screen">
  h1 {
   display: none;
  }
</style>

브라우저를 새로 고치면 h1 라벨이 숨겨져 있다는 것을 발견할 수 있습니다. 기술적으로 말하자면, 우리가 아까처럼 화면에 웹 페이지의 관건적인 부분을 숨겨서는 안 됩니다.이것은 단지 학습 목적에만 쓰인다.
h1 스크린에만 숨겨져 있으며 문서를 인쇄하면 인쇄된 문서에 나타납니다.

이전에 언급한 바와 같이, 문서를 인쇄할 때, 화면에서 이 동작을 실행하지 말고, 문서에서 그다지 중요하지 않은 부분을 숨기는 것이 프린터 잉크를 절약할 수 있기 때문이다.
이전 그림을 보면 경계가 문서에 표시되는 것을 발견할 수 있습니다. 실제로 문서를 인쇄하는 사람은 이 특정한 상하문의 경계에 관심을 갖지 않기 때문에 문서를 인쇄할 때 숨기는 것이 좋습니다.
인쇄 미디어를 최적화하기 위해 style 태그의 코드를 업데이트합니다.

<style media="print">
  main {
    border: none;
  }
</style>

브라우저를 저장하고 새로 고치면 변경 사항을 알 수 없습니다.프레임을 인쇄하지 않고 문서를 계속 인쇄합니다.

CSS 파일에서 @media 규칙을 사용하여 동일한 단계를 반복할 수 있습니다.@media 규칙의 기본 구문은 다음과 같습니다.

@media <device type> {
    /* your CSS rules */
}

위 구문에 따라 다음 사항을 참조하십시오.

장면

에 따라 <device type> 또는 screen로 교체

당신의 CSS 규칙은 당신이 이 시리즈에서 익숙한 것입니다. 예를 들어 print

이제 태그와 모든 코드를 삭제하고 CSS 파일로 전환한 다음 코드 맨 위에 다음을 추가합니다.

/*
 * Note i have used the keyword !important to make it more
 * specific to prevent the "cascade" from overriding it
*/

@media print {
  main {
    border: none !important;
  }
}

브라우저를 새로 고치고 문서를 인쇄합니다.결과는 같다.p { font-weight: 12em; }는 조준speech synthesizers을 원할 때 사용하고 style 모든 장치에 적용해야 합니다.

미디어 기능

미디어 유형 외에도 브라우저 출력 장치나 환경의 특정한 특징을 설명하는 미디어 기능도 사용할 수 있습니다.
우리는 모든 미디어 기능을 포함할 수 없지만, 가장 흔히 볼 수 있는 기능에 대해 토론해 봅시다.

speech - 색상이 있는 모든 출력 장치에 적용됩니다

all - 뷰포트 높이, 즉 사용 가능한 브라우저 창 높이

color - 사용 가능한 브라우저 창 너비

height - 최소 너비

width - 최대 너비

min-width - 사용자가 요소에 마우스를 놓을 수 있는지 확인합니다. 예를 들어 마우스를 놓을 수 있는지

max-width - 뷰포트 방향, 가로 또는 세로 방향

코드를 작성할 때가 되었다.
다음 코드는 컬러 스크린이 있는 모든 장치에 적용됩니다.

@media (color) {
  /* your CSS rules here */
}

사용자가 요소에 멈출 수 있는지 확인하시겠습니까?잘했어:

@media (hover) {
  /* your CSS rules here */
}

specification states that this value ( hover ) is at risk, 이는 규범이 후보 추천 수준에 도달하면 삭제할 수 있음을 의미한다.그러니 사용하기 전에 조심해야 한다.orientation과hover는 밀접한 관계를 가진다. 특정한 스타일을 특정한 범위의 장치 화면에 적용하기를 원할 수 있기 때문이다.min-width와 max-width는 접두사로 불리며 최소값과 최대값을 대표한다.
다음 미디어 규칙은 화면 크기가 최소 min- 인 장치에 적용됩니다.

@media (min-width: 320px) {
     /* your CSS rules here */
}

다음 미디어 규칙의 코드는 가로형 장치에 적용됩니다.

@media (orientation: landscape) {
     /* your CSS rules here */
}

max-와 320px는 같은 모델을 따른다.너비나 높이, 뒤에 세미콜론 기호, 그리고 값을 적으세요. 예를 들어height상술한 다양한 미디어 기능을 테스트하기 위해 width 규칙이 필요할 수도 있습니다. 이것이 복잡한 미디어 조회의 관건입니다.

복잡한 미디어 조회 만들기

여러 장치의 기능을 동시에 테스트하려면 복잡한 미디어 조회가 편리합니다.이를 위해, 우리는 논리 연산자라고도 불리는 기본적인 볼 논리를 익혀야 한다
미디어 쿼리에서 허용되는 부울 논리는 다음과 같습니다.

@media (height: 450px) { /*your CSS rules here*/ }

@media

and

기타 내용은 다음과 같습니다.

not

, (쉼표)

only 논리 연산자를 and 규칙과 함께 사용할 때, 모든 조건은 쿼리를true로 되돌려야 합니다.쿼리가 false로 되돌아오면 미디어 쿼리의 CSS 코드가 실행되지 않습니다.
다음을 예로 들 수 있습니다.

@media screen and (min-width: 12em) {
  /*
    * The CSS code will only execute if the device has a screen and a
    * width of at least 12em
  */
}

다른 예:

@media screen and (min-width: 12em) and (orientation: landscape) {
  /*
   * The CSS code will only run if device has a screen and
   * width of at least 12em and the device orientation is landscape
  */
}

화목하다

@media 연산자는 미디어 검색을 부정하는 데 사용되며, 검색이false로 되돌아오면true로 되돌아옵니다.
예:

@media not screen and (orientation: portrait) {
  /*
   * The main background color will only change to yellow if
   * the device orientation is not portrait which means the
   * background color will be yellow in landscape mode or if
   * the device orientation is too small to be considered as a portrait
  */

   main {
     background-color: yellow !important; 
   }
}

위의 코드를 사용하여 CSS의 미디어 조회를 업데이트하고 브라우저를 세로 형식으로 조정하면 배경색은 기본적으로 CSS에 명시된 다른 값으로 변경됩니다.

장치가 너무 작아서 세로 장치로 볼 수 없다

수직 장치

아니오

not 연산자는 전체 질의가 일치할 때만 스타일을 적용합니다.The specification 규정:

The only keyword has no effect on the media query’s result, but will cause the media query to be parsed by legacy user agents as specifying the unknown media type “only”, and thus be ignored.

이것은 키워드가 이전 브라우저에서 선택한 스타일을 적용하지 않도록 하는 데 매우 유용하다는 것을 의미한다.만약 네가 낡은 웹 브라우저를 처리해야 한다면, 이 키워드는 틀림없이 쓸모가 있을 것이다. 그러나 이것은 보기 드문 것이다.
이전 단계.