javascript - 모바일 패딩 문제

Question

vue.js를 배우다가 이런 이상한 현상을 발견했습니다
width:375px padding:0 22px 0 12px
다음과 같이 표시됩니다

왼쪽에는 공백이 있지만 오른쪽에는 공백이 없는 것을 볼 수 있습니다

콘솔 디스플레이

완전한 CSS

으아악

왜 너비를 375px(iPhone6)로 설정하면 왼쪽 패딩이 표시될 수 있지만 오른쪽은 이미 전체 너비로 설정되어 있지 않나요? , 사실 padding을 margin으로 변경해도 마찬가지입니다

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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