CSS에서 @media screen과 (최대 너비 : 1024px)의 의미는 무엇입니까?

CSS에서 @media screen과 (최대 너비 : 1024px)의 의미는 무엇입니까?

---

상속 한 CSS 파일 에서이 코드 조각을 찾았지만 이해할 수는 없습니다.

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

구체적으로, 첫 번째 줄에서 무슨 일이 일어나고 있습니까?

---

그것은 미디어 쿼리입니다. 브라우저가 포함 된 테스트를 통과하지 않으면 내부 CSS가 실행되지 않습니다.

이 미디어 쿼리의 테스트는 다음과 같습니다.

1. @media screen— 브라우저는 "스크린"범주에있는 것으로 식별합니다. EG에 반대 -이 대략 브라우저가 데스크탑 클래스 자체를 고려 의미 나이 (아이폰 및 기타 스마트 폰 브라우저,주의 휴대 전화의 브라우저를 않는 화면 범주에있는 것으로 자신을 식별), 또는 스크린 리더 - 그것은 표시 있다는 페이지를 인쇄하지 않고 화면에 표시합니다.

2. max-width: 1024px— 브라우저 창의 너비 (스크롤 막대 포함)는 1024 픽셀 이하입니다. ( 장치 픽셀이 아닌 CSS 픽셀 )

이 두 번째 테스트는 CSS를 iPad, iPhone 및 유사한 장치로 제한하기위한 것입니다 (일부 브라우저는 max-width미디어 쿼리에서 지원하지 않으며 많은 데스크톱 브라우저가 1024 픽셀보다 넓기 때문에).

그러나 max-width미디어 쿼리 를 지원하는 브라우저에서 너비가 1024 픽셀 미만인 데스크톱 브라우저 창에도 적용됩니다 .

미디어 쿼리 사양은 다음과 같습니다.

• http://www.w3.org/TR/css3-mediaqueries/

---

화면에 정의 된 스타일 (예 : 인쇄 또는 다른 미디어는 아님)을 제한하고 너비가 1024px 이하인 뷰포트로 범위를 제한합니다.

http://www.css3.info/preview/media-queries/

---

화면에 페이지가 최대 1024 픽셀의 해상도로 렌더링되면 다음 규칙을 적용하십시오.

이미 알고 있듯이 일부 CSS를 핸드 헬드, 스크린, 프린터 등의 미디어 유형으로 타겟팅 할 수 있습니다.

자세한 내용 은 여기 를 참조하십시오 ..

---

그건 미디어 쿼리 . 특정 규칙의 특정 장치에만 CSS 규칙의 일부를 적용 할 수 있습니다.

---

필자의 경우 브라우저가 800px있거나 그 이하일 때 웹 사이트의 로고를 가운데에 놓고 싶었다 @media.

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

그것은 나를 위해 일했습니다. 누군가 가이 솔루션을 유용하게 사용하기를 바랍니다. :) 자세한 내용은 이 내용을 참조 하십시오 .

---

화면 크기가 1024이면 CSS 규칙 아래에만 적용됩니다.

---

미디어 쿼리 조건이 true이면 해당 조건을 가진 CSS가 작동합니다. 즉, 미디어 쿼리의 조건 픽셀 크기 내의 CSS가 영향을 미치거나 조건이 실패하는 경우 장치의 너비가 CSS가 작동하지 않는 것보다 1024px보다 큰 경우 미디어 쿼리 조건이 false이기 때문에 해당 조건이 실패합니다.

max-width 해당 너비까지의 최대 CSS 제한입니다.

---

또한 'px'뿐만 아니라 'em'도 사용할 수 있습니다. 블로그와 텍스트 기반 사이트는 브라우저를 통해 텍스트 내용에 대한 레이아웃 결정을 더 많이 내릴 수 있습니다.

워드 프레스 스물 여섯에서 나는 태그 라인이 모바일뿐만 아니라 데스크탑에도 표시되기를 원했다. 그래서 이것을 내 자식 테마 style.css에 넣었다.

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

---

특정 기능을 대상으로 다른 코드를 실행합니다 ...

예를 들면 다음과 같습니다.

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

위의 스 니펫은이 프로그램을 실행하는 장치의 화면 너비가 600px 또는 600px 미만인 경우 프로그램 이이 부분을 실행해야한다고 말합니다.

참고 URL : https://stackoverflow.com/questions/4189868/what-does-media-screen-and-max-width-1024px-mean-in-css