>  기사  >  웹 프론트엔드  >  CSS 미디어 쿼리가 실패하면 어떻게 해야 할까요?

CSS 미디어 쿼리가 실패하면 어떻게 해야 할까요?

藏色散人
藏色散人원래의
2023-01-28 15:29:582291검색

잘못된 CSS 미디어 쿼리에 대한 해결 방법: 1. "@media screen and (max-width:768px){...}"와 같은 구문을 수정합니다. 2. html 헤더 파일에 필요한 메타 태그를 추가합니다. 미디어 쿼리 문은 원본 CSS 문서 뒤에 배치될 수 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.