잘못된 CSS 미디어 쿼리에 대한 해결 방법: 1. "@media screen and (max-width:768px){...}"와 같은 구문을 수정합니다. 2. html 헤더 파일에 필요한 메타 태그를 추가합니다. 미디어 쿼리 문은 원본 CSS 문서 뒤에 배치될 수 있습니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터
CSS 미디어 쿼리가 실패하면 어떻게 해야 합니까?
CSS @media 미디어 쿼리가 잘못되었습니다.
@media 미디어 쿼리로 작성된 CSS 스타일이 잘못되었습니다.
1. 문제
@media 미디어 쿼리로 작성된 CSS 스타일이 html에 적합하지 않습니다.
2. 해결 방법
한 가지 시도: 문법 사양 - 'and'와 '('
@media screen and (max-width:768px){ body { padding-top:150px; padding-bottom: 20px; } }
두 가지 시도: 환경 - 필요한 메타 태그가 html 헤더 파일에 추가되었는지 확인하세요
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head>
three : 우선순위 - 원본 CSS 문서
body{ padding-top:50px; padding-bottom:20px; } @media screen and (max-width:768px){ body { padding-top:150px; padding-bottom: 20px; } }
다음에 미디어 쿼리 문을 넣습니다. 권장 학습: "css video tutorial"
위 내용은 CSS 미디어 쿼리가 실패하면 어떻게 해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!