|
대부분의 국내 디자이너들은 px를 선호하는 반면, 대부분의 해외 웹사이트는 em과 rem을 선호하는데, 이 세 가지의 차이점은 무엇이며, 각각의 장단점은 무엇일까요? 자세히 소개해 드리겠습니다. PX 기능: 1. IE는 px를 단위로 사용하는 글꼴 크기를 조정할 수 없습니다; 2. 대부분의 해외 웹사이트가 조정이 가능한 이유는 em 또는 rem을 폰트 단위로 사용하기 때문입니다; 3. 파이어폭스는 px, em, rem을 조정할 수 있지만, 중국 네티즌의 96% 이상이 IE 브라우저(또는 커널)를 사용합니다. 픽셀 크기. 상대 길이 단위. 픽셀 픽셀은 모니터의 화면 해상도에 상대적인 값입니다. (CSS2.0 매뉴얼에서 인용) EM은 길이의 상대 단위입니다. 현재 객체 내 텍스트에 대한 글꼴 크기. 만약 해당 행의 글꼴 크기가 인위적으로 설정되지 않았다면, 이는 브라우저의 기본 글꼴 크기에 상대적으로 맞춰집니다. (CSS2.0 매뉴얼에서 인용) 모든 브라우저의 기본 글꼴 높이는 16px입니다. 조정되지 않은 모든 브라우저는 이를 준수합니다: 1em=16px. 그럼 12px=0.75em, 10px=0.625em. 글꼴 크기 변환을 단순화하려면 CSS의 본문 선택기에서 font-size=62.5%를 선언해야 합니다. 이 경우 em 값이 16px*62.5%=10px가 되어 12px=1.2em, 10px=1em이 됩니다. 즉, 원래 px 값을 10으로 나누고 em으로 대체하면 됩니다. EM 특징: 1. em의 가치는 고정되어 있지 않다; 2. em은 부모 요소의 글꼴 크기를 상속합니다. 그래서 CSS를 작성할 때 두 가지에 주의를 기울여야 합니다: 1. 본문 선택기에서 font-size =62.5% 선언; 2. 원래 px 값을 10으로 나누고 em으로 대체하는 것입니다; 3. 확대된 글꼴의 em 값을 다시 계산합니다. 글꼴 크기 선언을 반복하지 마세요. 즉, 1.2 * 1.2 = 1.44 현상을 피하기 위해서입니다. 예를 들어, #content에서 글꼴 크기를 1.2em이라고 선언하면, p의 글꼴 크기를 선언할 때 1em이 될 수 있고 1.2em이 될 수 없습니다. 왜냐하면 이 em은 그 em이 아니기 때문이며, #content의 글꼴 높이를 물려받기 때문에 1em=12px가 됩니다. REM 기능 REM은 CSS3에 새로 추가된 상대 단위(근 em)로, 많은 관심을 끌고 있습니다. 이 유닛과 EM의 차이점은 무엇인가요? 차이점은 rem으로 원자의 글꼴 크기를 설정할 때도 상대 크기이지만, 상대 크기는 HTML 루트 요소만 된다는 점입니다. 이 장치는 상대 크기와 절대 크기의 장점을 결합한 것으로 볼 수 있어, 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있을 뿐만 아니라, 층마다 글꼴 크기를 조합하는 연쇄 반응을 피할 수 있습니다. 현재 REM은 IE8 이하를 제외한 모든 브라우저에서 지원되고 있습니다. 이를 지원하지 않는 브라우저의 경우, 대응 방식도 매우 간단하는데, 바로 절대 단위 문장을 작성하는 것입니다. 이 브라우저들은 rem으로 설정된 글꼴 크기를 무시합니다. 예를 들어보겠습니다: p {font-size:14px; 폰트 크기: .875rem; } 메모:폰트 단위 선택은 주로 프로젝트에 달려 있고, 사용자가 최신 브라우저를 사용 중이라면 REM을 권장하며, 호환성이 걱정된다면 px를 사용하거나 둘 다 사용하는 것이 좋습니다. 여기 px, em, rem 단위 변환 도구 주소가 있습니다:http://pxtoem.com/
| 
게시됨 2017. 3. 21. 오전 9:31:50
|
|
|
