CSS에서 @media screen 및 (max-width: 1024px)는 무엇을 의미합니까?

CSS에서 @media screen 및 (max-width: 1024px)는 무엇을 의미합니까?

물려받은 CSS 파일에서 이 코드 조각을 찾았지만 이해가 되지 않습니다.

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

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

그건 언론의 질문입니다.브라우저에 포함된 테스트를 통과하지 않는 한 내부의 CSS가 실행되지 않도록 합니다.

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

1. @media screen— 브라우저는 자신이 "화면" 카테고리에 있는 것으로 식별합니다.이는 브라우저가 데스크톱 클래스로 간주된다는 것을 의미합니다. 예를 들어, 구형 휴대폰 브라우저(아이폰 및 기타 스마트폰 브라우저는 화면 범주에 포함되어 있음) 또는 화면 판독기와 달리, 페이지를 인쇄하는 것이 아니라 화면에 표시한다는 것을 의미합니다.

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

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

그러나, 그것은 또한 1024 픽셀 폭 이하의 데스크톱 브라우저 창들에도 적용될 것입니다.max-width미디어 쿼리.

미디어 쿼리 사양은 다음과 같습니다. 꽤 읽기 쉽습니다.

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

여기서 정의된 스타일을 화면(예: 인쇄 또는 일부 다른 매체)으로 제한하고 너비가 1024px 이하인 포트를 보기 위해 범위를 추가로 제한합니다.

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

다음과 같이 적혀있습니다.최대 너비 1024픽셀의 해상도로 페이지를 화면에 렌더링하면 다음 규칙을 적용합니다.

이미 알고 있듯이 휴대용, 스크린, 프린터 등이 될 수 있는 미디어 유형에 CSS를 적용할 수 있습니다.

자세한 사항은 여기에서 확인해 보시기 바랍니다.

제 경우에는 브라우저가 다음과 같이 설정되어 있을 때 제 로고를 웹 사이트에 중심을 두려고 했습니다.800px그 이하로, 그 다음에 저는 이것을 사용해서 했습니다.@media태그:

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

효과가 있었습니다. 누군가 이 해결책을 유용하게 찾았으면 합니다.:) 자세한 내용은 참고하시기 바랍니다.

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

화면 크기가 1024인 경우 아래 CSS 규칙만 적용한다는 의미입니다.

미디어 쿼리 조건이 참이면 해당 조건을 가진 CSS가 작동합니다.즉, 미디어 쿼리의 조건 픽셀 크기 내의 CSS가 영향을 미치거나, 그렇지 않으면 장치의 너비가 CSS보다 1024px 이상 클 경우 조건이 실패할 수 있습니다.미디어 쿼리 조건이 거짓이기 때문입니다.

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

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

예를 들어,

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

  }

위의 토막글은 만약 이 프로그램을 실행하는 장치가 600 px 또는 600 px 폭 미만의 화면을 가지고 있다면, 이 경우 우리의 프로그램은 이 부분을 실행해야만 합니다.

또한 'px'뿐만 아니라 'em'도 사용할 수 있다는 점에 유의할 필요가 있습니다. 블로그와 텍스트 기반 사이트는 브라우저가 텍스트 내용과 더 관련된 레이아웃 결정을 내리기 때문입니다.

워드프레스 26에서 저는 제 태그라인이 데스크톱 뿐만 아니라 모바일에도 표시되기를 원했기 때문에 이것을 제 아이 테마 스타일에 넣었습니다.css

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

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