잘못된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
