rem의 너비와 높이가 적용되지 않는 문제에 대한 분석

많은 프런트엔드에서는 이제 요소와 글꼴 크기를 단위로 rem을 사용합니다.

일반 설정은

html{

font-size:62.5%;

}

변환 소스 1rem = 16px

10/16 = 0.625입니다.

이렇게 하면 10px는 1rem이 됩니다

1.4rem = 14px(변환이 쉽습니다)

1.6rem = 16px(변환이 쉽습니다)

크롬 브라우저에서 글꼴이 깨지는 문제가 있습니다 12px보다 작은 것은 모두 12px입니다

그러나 요소의 너비와 높이를 계산할 때 문제가 발생합니다

예를 들어 div의 너비는 원래 100px이고 높이는 100px입니다

원래 생각으로는 너비: 10rem & 높이: 10rem

하지만 실제로는 너비: 120px(너비: 10rem) && 높이: 120px(높이: rem)

이었습니다. 나는 완전히 혼란스러워했습니다. 어떻게 그럴 수 있습니까? . . . .

글꼴 크기에는 문제가 없는데 왜 너비와 높이는 작동하지 않나요? . . . .

그 이유는 방금 말씀드린 것처럼 크롬의 최소 글꼴 크기가 12px이기 때문입니다. .

html에서 글꼴 크기를 62.5%로 설정했습니다. (= 10px) 실제 값은 =12px

이제 이유를 알았으니 이렇게 설정하면 됩니다.

62.5% * 12를 입력하고

변경합니다. 원래 값은 2

로 균등하게 나누어집니다. 예를 들어

font-size:125%;

}

div{

font-size: 0.8rem; 16/10 /2=0.8*/

width: 5rem; /*실제값: 100px 100/10/2=5*/

}

연산이라면 어떻게 해야 할까요? 좋지 않아요

us 100을 설정하면

html{

font-size:625%;

}

div{

font-size: 0.16rem; 대략 16/100=0.16* /

width: 1rem; /*실제값: 100px 100/100=1*/

}

이것은 62.5% 변환과 거의 같습니다. , 즉 10으로 나누면 100으로 나누는 것이 됩니다

위 내용은 rem의 너비와 높이가 적용되지 않는 문제에 대한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!