이 사이트의 CSS는 데스크톱 버전, 미디어 쿼리로 만든 모바일 버전과 마찬가지로 내 컴퓨터에서는 잘 작동하지만 모바일 장치에서 보면 CSS가 작동하지 않습니다. 웹사이트 링크: https://lightheart-basbousa-3c2db6.netlify.app/, 저장소 링크 https://github.com/hetyug04/portfolioV7. Netlify에서 호스팅되지만 이전에는 문제가 없었습니다. 이건 내 폰으로 보는 모바일뷰
CSS가 더 작은 화면 크기에서 실행되고 있습니다.
브라우저의 개발 도구를 사용하면 인트로 클래스에 display: none가 포함된 미디어 쿼리가 있는 것을 볼 수 있습니다. 이는 1015픽셀보다 작거나 같은 화면에 영향을 미칩니다. 미디어 쿼리를 변경하거나 삭제하면 출력이 변경됩니다.
display: none
이 항목이 존재하는 이유와 이를 제거하면 문제가 완전히 해결될지 확실하지 않지만 이를 확인하는 것이 첫 번째 단계입니다.
오버플로 및 잘못된 너비와 같은 다른 문제도 있습니다. Mobile First Design Approach를 확인해 보세요.
문제를 해결했는데, 스타일시트에 CSS 스타일을 중첩했기 때문인 것 같습니다. 스타일 중첩을 해제하면 CSS가 모바일 브라우저에서 작동하기 시작했습니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS가 더 작은 화면 크기에서 실행되고 있습니다.
브라우저의 개발 도구를 사용하면 인트로 클래스에
display: none가 포함된 미디어 쿼리가 있는 것을 볼 수 있습니다. 이는 1015픽셀보다 작거나 같은 화면에 영향을 미칩니다. 미디어 쿼리를 변경하거나 삭제하면 출력이 변경됩니다.이 항목이 존재하는 이유와 이를 제거하면 문제가 완전히 해결될지 확실하지 않지만 이를 확인하는 것이 첫 번째 단계입니다.
오버플로 및 잘못된 너비와 같은 다른 문제도 있습니다. Mobile First Design Approach를 확인해 보세요.
문제를 해결했는데, 스타일시트에 CSS 스타일을 중첩했기 때문인 것 같습니다. 스타일 중첩을 해제하면 CSS가 모바일 브라우저에서 작동하기 시작했습니다