파크로그
article thumbnail
px 단위를 사용하면서 생긴 이슈 - px, rem
Frontend/✏️ CSS 2022. 5. 16. 16:53

PR 을 보내면서, 데모 홈페이지를 같이 첨부하는 편인데, 내 화면에선 깨지지 않던 레이아웃이 리뷰어 분의 화면에선 깨져있었다. 근데 내 화면에선 아무리봐도 레이아웃이 깨져있지도 않았고, 크롬의 글꼴 크기를 조정해보아도 깨지지 않았다. 일단 레이아웃은 - width: 700px - height: 500px 로 잡혀있는 상황이었는데, 크롬환경이 아닌 사파리 환경으로 테스트해보았다. 뭐지? 왜 사파리에서는 또 깨지지? 브라우저 별로 기본 폰트크기가 다른건가? 일단은 width, height가 px 단위로 사용되고있어서 그런가? 라는 의심으로 rem 단위로 변경해보았다. 브라우저의 폰트 크기를 따르는 rem 단위로 변경하니 레이아웃이 깨지지않았다. 일단 rem 단위로 변경하여 해결이 되었으니, 브라우저 별로 ..