모바일 페이지에서 폰트 사이즈 조절 text-size-adjust

모바일 페이지에서 반응형으로 작업을 하면서 폰트 사이즈 크기 조절

- 에디터에 따라 기본값이 달라서 어려움이 있었는데, 자동으로 폰트 크기를 조절하는 부분을 찾았습니다.

이걸 방지하는것이 text-size-adjust 입니다.

 

text-size-adjus 는 4가지 속성을 사용합니다.

Value
Description


auto
화면 폭에 맞게 크기가 자동으로 조절됩니다.(device별로 크기가 다를수 있어서 비추천)


none(기본값)
화면 크기에 따라 자동조절 하지 않는다.


percentage (%)
퍼센트(%)로 크기를 조절합니다. (모든 device에서 동일한 텍스트 크기 부여 가능)


inherit
부모요소의 속성값을 상속받아 적용 됩니다.

 

/* Keyword values */
text-size-adjust: none;
text-size-adjust: auto;

/* <percentage> value */
text-size-adjust: 80%;

/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: revert;
text-size-adjust: revert-layer;
text-size-adjust: unset;

 

이 속성은 표준이 아니므로 벤더를 넣어서 사용해야 합니다.

html { 
	-webkit-text-size-adjust: none; 
	-moz-text-size-adjust: none; 
	-ms-text-size-adjust: none; 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

text-size-adjust - CSS: Cascading Style Sheets | MDN