javascript - 모바일 패딩 문제

Question

vue.js를 배우다가 이런 이상한 현상을 접하게 되었습니다. width:375px padding:0 22px 0 12px를 설정했더니 아래와 같이 왼쪽에 공백이 생기고, 왼쪽에는 콘솔이 없는 것을 볼 수 있습니다. 전체 CSS {코드...}를 표시하려면 오른쪽에 너비를 375px(iPhone6)로 설정하면 왼쪽의 패딩이...

伊谢尔伦 · Answer

첫 번째 스크린샷은 iPhone 6의 스크린샷이고 두 번째 스크린샷은 너비를 늘린 후의 스크린샷입니다. 그림 2에서 볼 수 있듯이 양쪽의 패딩 설정은 정확하지만 상위 요소의 너비가 다릅니다. p 요소는 12px+375px+22px보다 작으므로 뒤쪽의 패딩과 타원은 보이지 않습니다.

p 요소는 블록 요소이고 기본적으로 상위 요소로 채워지는데 특별한 요구사항이 없다면 삭제할 수 있나요? width 속성을 제거한 후의 스크린샷은 다음과 같습니다. width: 375px;

大家讲道理 · Answer

iPhone6의 너비는 375입니다. 박스 사진을 보시면 내용물 너비가 375입니다. 패딩도 더하면 화면 너비보다 커야 합니다. 당연히 왼쪽에 패딩만 보이실 텐데요. box-sizing 설정 후: border-box, width 설정된 너비는 콘텐츠 너비 + 패딩 너비가 됩니다

学习ing · Answer

귀하의 경우에는 가로 스크롤 막대가 있어야 합니다. 화면이 375인 경우 너비를 375로 설정하고 패딩을 0 22px 0 12px로 설정하면 알 수 있습니다. 409입니다. box-sizing:border-box; 속성을 추가하면 너비에 패딩과 테두리가 포함됩니다. 예를 들어 너비 설정은 0 22px 0 12px입니다. is 341 (375-22-12);
PS: 뭔가 이해가 안 되네요. 위 스타일이 컴파일에 의해 계산된 것인가요, 아니면 직접 작성한 것인가요? 쓰신다면 모바일 웹사이트용 화면크기 375에만 적응하시나요?

怪我咯 · Answer

현재 설정된 기기의 해상도는 어떻게 되나요?