css3 미디어가 작동하지 않는 이유: 1. HTML 메타 태그에 뷰포트 속성이 설정되지 않았습니다. 2. 스타일 충돌, @media 쿼리 코드의 스타일이 후속 CSS에 의해 덮어쓰여집니다. 형식 작성 중 오류가 발생했습니다. mediah 문 and 뒤에 공백이 있어야 합니다.
이 튜토리얼의 운영 환경: windows10, css3, 이 글은 모든 브랜드의 컴퓨터에 적용 가능합니다.
관련 권장 사항: "CSS 비디오 튜토리얼"
웹 페이지 제작에서 @media screen을 사용하여 다양한 액세스 장치에 맞게 웹 페이지 레이아웃을 조정합니다. CSS에 @media 화면 속성을 추가하고, 다양한 장치의 너비에 따라 CCS 스타일을 작성하고, 브라우저 너비에 따라 스타일 파일을 판단하고, 다양한 너비 값을 출력하면 됩니다.
근데 @media 미디어 쿼리를 설정한 후 작동하지 않는 경우가 있는데 이유가 무엇인가요? 어떻게 해결하나요? 다음 기사에서는 이를 소개합니다.
css3 @media가 작동하지 않는 가능한 이유
당황하지 말고 천천히 분석하세요.
먼저 미디어 쿼리가 적용되지 않는 것이 아니라 CSS 자체에 문제가 있는지 확인하세요. 예:
div{display:flex;}/*那么div所有的display效果都将无法生效*/첫 번째 오류: 형식 쓰기 오류이며 뒤에 공백이 와야 합니다.
예를 들어 다음 코드는 다음과 같습니다.
@media screen and (max-width:500px){ }두 번째 오류: 스타일 충돌 @media 쿼리; 코드는 다음 CSS 덮어쓰기에 의해 변경됩니다.
참고: CSS 작성 시 이전 CSS에 의해 덮어쓰여지는 것을 방지하기 위해 @media 쿼리가 포함된 CSS를 뒤에 작성하는 것이 좋습니다.
세 번째 오류: CSS 자체에 문제가 있어 CSS가 적용되지 않습니다.
참고: 이는 매우 일반적인 오류입니다. 예를 들어 블록 요소가 부동하고 상위 요소에 높이가 없습니다. 이번에는 상위 요소에 배경색을 추가했는데 적용되지 않는 것으로 확인되었습니다. 실제로는 CSS에 의한 오류로 표시되지 않았습니다.
예를 들어 CSS 선택의 우선순위로 인해 둘 중 하나는 적용되고 다른 하나는 적용되지 않게 됩니다. 또한 CSS 오류로 인해 발생하는 문제도 많기 때문에 하나씩 나열하지는 않겠습니다.
네 번째 실수: 메타 속성 뷰포트 속성입니다. 이것은 기본적인 상식이지만 일부 사람들은 이를 놓칠 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1" />
다섯 번째 오류: 괄호 안의 내용에는 끝 문자 ";" 및 기타 오류가 포함될 수 없습니다.
해결책:
해결책은 많지만 CSS 제거 방법을 사용하고 CSS를 사용하여 해당 부분을 주석 처리하는 것이 좋습니다.
물론 브라우저도 코드를 보고 확인하는 좋은 방법입니다. 문제를 해결하세요.
@media screen and (max-width:200px){
/*这只是一个示例*/
}더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 CSS3 @media가 작동하지 않는 이유는 무엇입니까? 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!