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

245

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

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

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

css media-queries

— 야린
소스

306

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

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

@media screen— 브라우저는 "스크린"범주에있는 것으로 식별합니다. EG에 반대 -이 대략 브라우저가 데스크탑 클래스 자체를 고려 의미 나이 (아이폰 및 기타 스마트 폰 브라우저,주의 휴대 전화의 브라우저를 않는 화면 범주에있는 것으로 자신을 식별), 또는 스크린 리더 - 그것은 표시 있다는 페이지를 인쇄하지 않고 화면에 표시합니다.
max-width: 1024px— 브라우저 창의 너비 (스크롤 막대 포함)는 1024 픽셀 이하입니다. ( 장치 픽셀이 아닌 CSS 픽셀 )

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

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

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

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

— 폴 디 웨이트
소스

내 화면 너비가 1200px 이상인 경우 @media screen에서 지정하는 방법

— sanoj lawrence

2

max-width를 사용하는 대신 (min-width : 1200px)를 사용하거나 미디어 쿼리없이 일반 CSS로 사용하고 더 작은 장치로 갈 때이를 덮어

— 쓰

뷰포트의 크기를 조정하면서 데스크톱에서만 스타일을 적용 할 수있는 방법이 있습니까 (모바일 아님)? 따라서 브라우저를 '최대 너비 720px'로 수동으로 크기를 조정하면 모바일이 아닌 데스크톱에서 사용자를 감지하는 미디어 문을 사용하고 예를 들어 720px 미만입니까?

— wharfdale

@ JordanC26 : 질문을하는 것처럼 보이며 화면 오른쪽 상단에있는 "질문하기"버튼을 원합니다. 그러나이를 사용하기 전에“데스크톱”및“모바일”의 의미를 정의 할 수 있습니다. Microsoft Surface 모바일입니까, 아니면 데스크톱입니까? 왜? 아직 발명되지 않은 미래의 장치는 어떻습니까?

— Paul D. Waite

55

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

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

— 크리스 벤틀리
소스

10

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

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

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

— 로렌조
소스

3

나는 그가 그것을 알고 있다고 가정하지 않을 것입니다.

— jcolebrand

6

필자의 경우 브라우저가 800px있거나 적을 때 웹 사이트에 로고를 배치하고 싶을 때 @media태그 를 사용 하여이 작업을 수행했습니다 .

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

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

— 예하니
소스

5

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

— 크로 진
소스

2

나는 여기에 hashlink을 할 수 있도록 링크를 변경 -> w3.org/TR/css3-mediaqueries/#media0 대신 여기의 -> w3.org/TR/css3-mediaqueries

— jcolebrand

1

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

— 쿠마르 니 테쉬
소스

1

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

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

— 아웁
소스

0

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

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

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

— MattB
소스

0

다른 코드를 실행하기 위해 지정된 기능을 대상으로합니다 ...

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

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

  }

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

— 샤힌 가세 미
소스