CSS3 미디어가 작동하지 않는 문제를 해결하는 방법

해결책: 1. 미디어 작성 형식이 "@media screen and (css style){}"인지 확인하세요. 2. 스타일이 충돌하는지 확인하세요. 3. 메타 태그의 뷰포트 속성을 설정하세요. 미디어 뒤에 괄호가 있으면 쓸 수 없습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

css3 @media가 작동하지 않는 이유 요약

먼저 미디어 쿼리가 적용되지 않는 것이 아니라 CSS 자체에 문제가 있는지 확인하세요.

div{display:flex;}/*那么div所有的display效果都将无法生效*/

외부 스타일은 에서 사용되는 src를 소개합니다. CSS, 부주의한 오류

<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/
<link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/

CSS 문제이고 자세히 분석할 수 밖에 없는 경우입니다.

문제를 해결하려면 다음 오류를 따르세요.

첫 번째 오류: 형식이 잘못 작성되었으며 그 뒤에 공백이 있어야 합니다. 예를 들어 아래 코드는

@media screen and (max-width:500px){ }

두 번째 오류: @media 쿼리 코드의 스타일을 덮어씁니다. css

참고: CSS를 먼저 작성하는 것이 좋습니다. 이 과정에서 이전 CSS에 의해 덮어쓰이는 것을 방지하기 위해 @media 쿼리가 포함된 CSS가 뒤에 작성됩니다.

세 번째 오류: CSS에 문제가 있습니다.

참고: 이는 매우 일반적인 오류입니다. 예를 들어 부동 블록 요소로 인해 현재 상위 요소에 배경색이 추가됩니다. 실제로는 CSS로 인한 오류이므로 표시되지 않습니다.

예를 들어 CSS 선택의 우선순위로 인해 둘 중 하나는 적용되고 다른 하나는 적용되지 않게 됩니다. CSS 오류로 인해 발생하는 문제가 많기 때문에 하나씩 나열하지는 않겠습니다.

네 번째 오류: 메타 속성 뷰포트 속성, 기본적인 상식이지만 일부 사람들은 놓칠 수 있습니다

<meta name="viewport" content="width=device-width, initial-scale=1" />

다섯 번째 오류: 괄호 안의 내용은 끝 문자 ";"를 쓸 수 없으며 기타 오류가 있습니다.

관련 권장 사항: css 비디오 튜토리얼

위 내용은 CSS3 미디어가 작동하지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!