[error] 배포시 미디어쿼리 적용 안되는 에러

Next.js로 개발중인 개인 프로젝트에서 아이콘의 크기를 화면의 너비에 따라서 달라지게 하는 반응형을 적용하고자 

미디어 쿼리를 사용해서 css의 적용을 다르게 보이게 했다.

//header.jsx

...
<span>
	<Image className="mobile_logoimg" src={logoimg} alt="logo image" height="35" width="35" />
</span>

<span>
	<Image className="web_logoimg" src={logoimg} alt="logo image" height="50" width="50" />
</span>
...

/* global.css  */
.web_logoimg {
  @media screen and (max-width: 768px) {
    display: none;
  }
}

.mobile_logoimg {
  @media screen and (min-width: 768px) {
    display: none;
  }

해당 미디어쿼리가 

로컬 테스트 환경에서는 정상적으로 작동했으나

 

Vercel 배포 이후에는 미디어 쿼리가 적용되지 않는 오류를 확인할 수 있었다.

웹 화면에서도 모바일 로고가 중복되게 보이는 오류화면

 

위와같이 웹 화면에서 모바일 로고도 함께 보이고, 모바일 화면에서는 아예 로고가 보이지 않았다. 

 

 

 

해결?

결국 명확한 원인은 규명하지 못하고 여러 미디어쿼리 방법을 찾아서 적용해보다가 아래와 같이 css를 수정한 이후에 정상적으로 적용되는 것을 확인할 수 있었다. 

.web_logoimg {
  @media (max-width: 768px) {
    display: none;
  }
}

.mobile_logoimg {
  display: none;

  @media (max-width: 768px) {
    display: inline;
  }
}

기존의 css 와 다른 점은 mobile_logoimg 키워드에 가장 기본값을 display: none으로 두고 @midia 조건을 만족하면 보이도록 변경한 것밖에는 없다. 

 

로컬 환경에서는 잘 작동했기 때문에 문법적인 오류는 아닌 것 같고... 

정확한 사용을 위해서는 더 공부가 필요할 것 같다. 

 

---

참조

 

CSS3 미디어쿼리 @media 규칙 이해.

 

6. Next.js 세팅하기 mobile detect