상속 한 CSS 파일 에서이 코드 조각을 찾았지만 이해할 수는 없습니다.
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}구체적으로, 첫 번째 줄에서 무슨 일이 일어나고 있습니까?
답변
그것은 미디어 쿼리입니다. 브라우저가 포함 된 테스트를 통과하지 않으면 내부 CSS가 실행되지 않습니다.
이 미디어 쿼리의 테스트는 다음과 같습니다.
-
@media screen— 브라우저는 “스크린”범주에있는 것으로 식별합니다. EG에 반대 -이 대략 브라우저가 데스크탑 클래스 자체를 고려 의미 나이 (아이폰 및 기타 스마트 폰 브라우저,주의 휴대 전화의 브라우저를 않는 화면 범주에있는 것으로 자신을 식별), 또는 스크린 리더 – 그것은 표시 있다는 페이지를 인쇄하지 않고 화면에 표시합니다. -
max-width: 1024px— 브라우저 창의 너비 (스크롤 막대 포함)는 1024 픽셀 이하입니다. ( 장치 픽셀이 아닌 CSS 픽셀 )
두 번째 테스트는 CSS를 iPad, iPhone 및 유사한 장치로 제한하기위한 것입니다 (일부 브라우저는 max-width미디어 쿼리에서 지원하지 않으며 많은 데스크톱 브라우저가 1024 픽셀보다 넓기 때문에).
그러나 max-width미디어 쿼리 를 지원하는 브라우저에서 너비가 1024 픽셀 미만인 데스크톱 브라우저 창에도 적용됩니다 .
미디어 쿼리 사양은 다음과 같습니다.
답변
화면에 정의 된 스타일 (예 : 인쇄 또는 다른 미디어는 아님)을 제한하고 너비가 1024px 이하인 뷰포트로 범위를 제한합니다.
답변
화면에 페이지가 최대 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 규칙 아래에만 적용됩니다.
답변
미디어 쿼리 조건이 true이면 해당 조건을 가진 CSS가 작동합니다. 즉, 미디어 쿼리의 조건 픽셀 크기 내의 CSS가 영향을 미치거나 조건이 실패하는 경우 장치의 너비가 CSS가 작동하지 않는 것보다 1024px보다 큰 경우 미디어 쿼리 조건이 false이기 때문에 의미합니다.
max-width 해당 너비까지의 최대 CSS 제한입니다.
