CSS3 미디어 쿼리가 작동하지 않는 이유는 무엇입니까?

styles.css에서 미디어 쿼리를 사용하고 있으며 둘 다 변형을 사용합니다.

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

창을 축소하면 일반 브라우저 (Safari, Firefox)에서 원하는 레이아웃으로 사이트 크기가 조정되지만 휴대 전화에는 모바일 레이아웃이 전혀 표시되지 않습니다. 대신 기본 CSS 만 표시됩니다.

누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

이 세 가지 모두 유용한 팁 이었지만 메타 태그를 추가해야하는 것처럼 보입니다.

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

이제 Android (2.2)와 iPhone 모두에서 작동하는 것 같습니다 ...

미디어 쿼리 위에 표준 CSS 선언이 있어야 합니다. 그렇지 않으면 쿼리가 작동하지 않습니다.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

키워드 only가 문제 일 수 있습니다. 다음과 같은 미디어 쿼리 사용에 문제가 없습니다.

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

언론 사이트에서 부트 스트랩을 사용했지만 IE8에서는 작동하지 않습니다. css3-mediaqueries.js 자바 스크립트를 사용했지만 여전히 작동하지 않습니다. 미디어 쿼리 가이 자바 스크립트 파일과 함께 작동하도록하려면 CSS의 미디어 쿼리 라인에 화면을 추가하십시오.

다음은 예입니다.

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css 위의 행처럼 간단한 행 연결.

오늘 나는 비슷한 상황을 겪었다. 미디어 쿼리가 작동하지 않았습니다. 얼마 후 나는 'and'이후에 그 공간을 발견했다. 적절한 미디어 쿼리는 다음과 같아야합니다.

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

CSS 코드의 순차적 순서도 중요합니다. 예를 들면 다음과 같습니다.

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

위의 코드는 실행 된 순서로 인해 작동하지 않습니다. 다음과 같이 작성해야합니다.

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

px 또는 rem과 같은 일부 단위에서는 항상 최대 너비와 최소 너비를 언급하십시오. 이것은 나를 위해 알아 냈습니다. 단위와 숫자 값없이 쓰면 브라우저가 미디어 쿼리를 읽을 수 없습니다. 예 : 이것은 @ 미디어 전용 화면과 (max-width : 950)이며 이것은 @media 전용 화면과 (max-width : 950px)입니다

반지에 다른 대답을 던지기. CSS 변수를 사용하려고하면 조용히 실패합니다.

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS 변수는 의도적으로 미디어 쿼리에서 작동하지 않습니다.

내가 본 적이없는 이상한 이유 : 미디어 쿼리 외부에서 "부모> 자식"선택기를 사용하는 경우 (Firefox 69에서) 미디어 쿼리가 중단 될 수 있습니다. 왜 이런 일이 발생하는지 잘 모르겠지만 시나리오에서 작동하지 않았습니다 ...

@media whatever {
    #child { display: none; }
}

그러나 다른 CSS와 일치하도록 부모를 추가하면 페이지가 더 올라갑니다.

#parent > #child { display: none; }

id는 매우 구체적이며 모호성이 없어야하므로 부모를 지정하는 것처럼 중요하지 않습니다. Firefox의 버그일까요?

OP의 코드 스 니펫은 올바른 주석 마크 업을 명확하게 사용하지만 CSS는 점진적인 방식으로 중단 될 수 있습니다. 따라서 구문 오류가 발생하면 그 이후의 모든 항목이 실패 할 수 있습니다. 몇 번이나 스타일 시트를 손상 시키는 잘못된 주석 마크 업 을 제공하는 신뢰할 수있는 출처에 의존했습니다 . OP가 코드의 작은 부분을 제공했기 때문에 다음을 제안합니다.

반드시 모든 CSS 주석의 확인이 마크 업 사용 /*... */- MDN에 따라 CSS에 대한 올바른 주석 마크 업이

린터 또는 안전한 온라인 검사기로 CSS를 검증하십시오. 여기 W3에 의해 하나

추가 정보 : 부트 스트랩 4에서 최신 권장 미디어 쿼리 중단 점을 확인하고 보일러 플레이트를 문서에서 바로 복사했습니다. 거의 모든 코드 블록에는 javascript-style comments로 레이블이 지정되어 //내 코드가 깨졌습니다. 문제를 해결하는 데 필요한 암호 컴파일 오류 만 발생했습니다. 당시에는 머리 위로 넘어져 슬픔을 일으켰습니다.

IntelliJ 텍스트 편집기를 사용하면 인식 할 수없는 파일 형식에 기본적으로 삽입 //되는 것을 제외하고는 ctrl + / 단축 키를 사용하여 LESS 파일에서 특정 CSS 행을 주석 처리 할 수있었습니다 . 프리웨어가 아니며 상당히 주류가 적으므로 신뢰하고 함께했습니다. 그건 내 코드를 어 겼어. 각 파일 유형에 대한 올바른 주석 마크 업을 가르치기위한 환경 설정 메뉴가 있습니다.

아래와 같은 메타 태그를 포함하면 브라우저가 뷰포트 확대 / 축소를 다르게 처리 할 수 ​​있습니다.

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

최근 에이 문제가 발생했으며 나중에 and와 사이에 공백을 넣지 않았기 때문에 발견되었습니다 (. 이것은 오류였다

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

그런 다음 이것을 수정하여 변경했습니다.

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

나는 몇 가지 방법을 사용합니다. 동일한 스타일 시트에서 @media (max-width : 450px)를 사용하거나 별도의 경우 헤더에 링크가 올바르게 있는지 확인하십시오. 나는 당신의 fixmeup을 보았고 CSS에 대한 혼란스러운 링크 배열이 있습니다. 그것은 당신이 HTC 욕망 S에 대해 말하는 것처럼 행동합니다.

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

나를 위해 max-height대신 표시 했습니다 max-width.

그것이 당신이라면, 그것을 바꾸십시오!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

브라우저 확대 / 축소 수준이 올바르지 않은 경우에도 발생할 수 있습니다. 브라우저 창 확대 / 축소는 100 % 여야합니다. Chrome에서는 Ctrl + 0확대 / 축소 수준을 재설정하는 데 사용 합니다.