이 CSS 라인의 의미는 무엇입니까?@media only 화면 및 (최소 디바이스 폭: 320px) 및 (최대 디바이스 폭: 480px)
워드프레스의 'Twenty Eleven' 테마 스타일시트 안에서 다음과 같은 코드 줄을 찾았습니다.
그것은 무엇을 뜻하나요?
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
이것은 CSS3 미디어 Query라고 불리며 웹 사이트가 다양한 화면 치수에 적응할 수 있도록 하는 기술입니다.또한 기본적으로 다양한 디바이스에 다양한 스타일을 전달할 수 있습니다.
새로 오신 분이기 때문에 미디어 쿼리를 다음 두 부분으로 나누어 보겠습니다.
@media only screen
즉, 화면이 있는 디바이스에 css 스타일을 적용합니다.키워드only이전 브라우저의 스타일시트를 전화기 스타일시트가 표시되지 않도록 숨기기 위해 사용합니다.
and (min-device-width: 320px) and (max-device-width: 480px)
이는 지정된 css가 최소 화면 크기를 가진 디바이스에서만 적용된다는 것을 의미하기 때문에 매우 명백합니다.320px최대치480px폭 치수로 표시됩니다.
이제 코드의 의미를 단계별로 이해하겠습니다.
코드명:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
@media 규칙은 미디어 유형/디바이스에 따라 다른 스타일 규칙을 정의하기 위해 사용됩니다.
only 키워드를 지정하면 미디어 기능이 있는 미디어 쿼리를 지원하지 않는 이전 브라우저가 지정된 스타일을 적용할 수 없습니다.최신 브라우저에는 영향을 주지 않습니다.
최소 및 최대 너비를 알고 있는 화면이 있는 장치로 스타일을 제한하려면 미디어 기능을 화면 미디어 유형에 연결할 수 있습니다.
screen and (min-device-width: 320px) and (max-device-width: 480px)
자세한 내용은 여기를 클릭하여 MDN 웹사이트를 확인하십시오.
언급URL : https://stackoverflow.com/questions/16402870/what-does-this-line-of-css-mean-media-only-screen-and-min-device-width-320px
'programing' 카테고리의 다른 글
| 계속하려면 아무 키나 누르십시오. (0) | 2023.04.08 |
|---|---|
| oracle sql developer에서 스토어드 프로시저를 실행하는 방법 (0) | 2023.04.03 |
| Oracle SQL Developer 실행 설명 계획 결과 이해 (0) | 2023.04.03 |
| python에서 wordpress REST api를 사용하여 이미지를 업로드하는 방법은 무엇입니까? (0) | 2023.04.03 |
| Access-Control-Allow-Origin 및 Angular.js $http (0) | 2023.04.03 |