메타 뷰포트 태그 및 CSS 미디어 쿼리 관련 문제

Question

좋아,

응답 성있는 웹 사이트의 CSS 미디어 쿼리 및 메타 뷰포트 태그에 대해 많은 질문이 있습니다. 나는 그들 중 1 톤을 읽었지만, 나는 운이 없다.

나는 응답 성이있는 웹 사이트 포트폴리오 웹 사이트를 운영하고 있습니다. 어느 날, 반응이 빠른 물건들이 작동을 멈췄습니다. 나는 그것을 조사하기 시작했고 단지 운이 없었습니다. 메타 뷰포트 태그를 사용하도록 설정했지만 그저 아무 것도하지 않는 것입니다.

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

과 반응 CSS 파일의 한 부분이 :

@-o-viewport, 
@-ms-viewport{ 
    width: device-width; 
} 

실망을 :

@media screen and(max-width: 800px){ 
    /*body:before{ color: #fff; content: 'Max-Width: 800px'; }*/ 

    .social-media a, 
    .social-media iframe{ 
     margin-bottom: 10px; 
    } 

    .level2{ 
     height: 140px; 
    } 

} 

나는 또한과 코드의이 비트없이 해봤 여기 내 <meta> 태그입니다 문제는 직장에서 방금 반응하는 사이트를 끝내고 아무런 문제가 없다는 것입니다. 나는 다른 눈의 세트가 내가 할 수 없었던 것을 잡을 수 있을지도 모른다고 생각한다.

pjlamb12.github.io에서 웹 사이트를 볼 수 있으며 데스크톱에서는 괜찮아 보이지만 모든 휴대 기기에서 원하는 것처럼 보이지는 않습니다.

감사합니다.

P.

이게 중요한지는 모르겠지만 사이트는 GitHub 페이지에 있으며 Jekyll을 사용하여 사이트를 운영하고 있습니다. 코드의 나머지 부분도 여기에 좋아 https://github.com/pjlamb12/pjlamb12.github.com

Answer 1

GitHub의에서 볼 수 있습니다

편집, 나는이 문제를 알아 냈어. 정말 어리 석고 작은 문제. 내 미디어 쿼리 라인에있었습니다.

@media screen and(max-width: 800px){ 
    /* styles */ 
} 

그러나 당신이해야 할 것은 : 여기에 내가 가진 무엇

@media screen and (max-width: 800px){ 
    /* styles */ 
} 

당신이 차이를 느낄나요? 몇 분이 걸렸지 만, 첫 번째 줄에 and과 ( 사이에 공백이 있어야합니다.

다른 사람이이 문제를 겪고 있다면이 문제를보고 먼저 시도해보십시오.

감사합니다.