화면크기가 달라지면 1, 2픽셀 수준의 작은 크기의 선들이 어긋나요
조회수 1292회
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
찾아보니, 해당 이슈는 순전히 웹브라우저가 고해상도 모니터/확대환경 에서 1픽셀을 어떻게 렌더링할 것이냐에 달린 문제 같습니다.
https://stackoverflow.com/a/42718300
... So although your 10px font-size is now really being rendered as 15px, it still shows as 10px in the inspector. To show you that the border has not been scaled up, the 1px is divided by 1.5, giving 0.667px.
... 따라서 폰트 자체는 10px이지만 실제로는 15px로 보여지고 있으므로, 개발자도구에서 검사해 보면 10px이라고 표시가 되지요. 테두리 요소가 확대되었다는 사실을 알려주기 위해서 1px은 1.5로 나눗셈되어야 합니다. 그러면 0.667px이 나오고요.
PS. 이유는 모르겠는데 그냥 직감따라 해보고서 발견한 사실: 현재 데모의
.boxLine
요소에display: inline-block;
속성을 추가하면 문제가 좀 나아지는 것처럼 보입니다.PS2. 왜
height: 1px;
로 1픽셀짜리 선을 긋고 계신가요? 윗분 댓글처럼border-bottom: 1px 어쩌구
를 쓰면 될 텐데요.- 화살표를 css로 그렸을때 생긴 문제인대 border-bottom을 주면 세로길이를 0px로 줘도 선의 위치가 원했던 위치와 미묘하게 다르게 나와서 저렇게 했습니다만.. 앞으로는 border로 주고 위치는 따로 다시 맞춰야겠내요 알 수 없는 사용자 2019.8.6 19:05
- 도형을 그리고 계신 거라면 svg를 사용하세요... 엽토군 2019.8.6 19:35
- border: 0.01rem solid #dcdbdb; zero 2022.3.15 15:38
댓글 입력