차이 무엇 pt과 pxCSS의는? 어느 것을 사용해야하며 왜 그런가요?
답변
px ≠ 픽셀
이 모든 답변이 잘못된 것 같습니다. 직감과 달리 CSS에서는 px 픽셀이 아닙니다 . 최소한 단순한 물리적 의미는 아닙니다.
CSS를위한 “매직”단위가 어떻게 개발 되었는지에 대해 W3C , EM, PX, PT, CM, IN… 에서이 기사를 읽으십시오 px. 의 의미는 px하드웨어 및 해상도 에 따라 다릅니다. (이 기사는 최신이며 2014-10 년에 마지막으로 업데이트되었습니다.)
그것에 대한 내 자신의 생각 : 1 px is the size of a thin line intended by a designer to be barely visible.
그 기사 를 인용하려면 :
px 단위는 CSS의 마술 단위입니다. 현재 글꼴과 관련이 없으며 절대 단위와 관련이 없습니다. px 단위는 작지만 표시되도록 정의되어 있으며 가로 1px 너비의 선을 선명한 가장자리로 표시 할 수 있습니다 (앤티 앨리어싱 없음). 선명하고 작고 눈에 보이는 것은 장치와 사용 방법에 따라 다릅니다. 휴대 전화와 같이 팔 길이, 컴퓨터 모니터와 같이 또는 책과 같이 책과 같이 눈에 가까이 대고 있습니까? 따라서 px는 일정한 길이가 아니라 장치의 유형과 일반적인 용도에 따라 달라집니다.
px의 모양에 대한 아이디어를 얻으려면 1990 년대 CRT 컴퓨터 모니터를 상상해보십시오. 가장 작은 점은 약 1/100 인치 (0.25mm) 또는 그 이상을 표시 할 수 있습니다. px 단위는 해당 화면 픽셀에서 이름을 얻었습니다.
요즘에는 더 작은 선명한 점을 표시 할 수있는 장치가 있습니다 (물론 돋보기가 필요할 수도 있음). 그러나 CSS에서 px를 사용한 지난 세기의 문서는 장치에 관계없이 여전히 동일하게 보입니다. 특히 프린터는 1px보다 훨씬 작은 디테일로 선명한 선을 표시 할 수 있지만 프린터에서도 1px 선은 컴퓨터 모니터와 매우 유사하게 보입니다. 장치는 변경되지만 px는 항상 동일한 시각적 모양을 갖습니다.
이 기사는 이 질문에 대답하기 위해 ptvs pxvs 사용에 대한 지침을 제공합니다 em.
답변
여기에 차이점에 대한 자세한 설명이 있습니다.
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
그것의 jist (소스에서)
픽셀 은 화면 매체에서 사용되는 (즉, 컴퓨터 화면에서 읽히는) 고정 크기 단위입니다. 픽셀은 “사진 요소”를 나타내며 화면에서 하나의 픽셀은 “사각형”입니다.
포인트 는 전통적으로 인쇄 매체 (용지 등에 인쇄 될 것)에서 사용됩니다. 한 점은 1/72 인치와 같습니다. 포인트는 고정 크기 단위이며 크기를 조정할 수 없다는 점에서 픽셀과 매우 유사합니다.
답변
CSS-Tricks에서이 훌륭한 기사를 살펴보십시오.
기사에서 가져온 :
pt
글꼴 크기를 선언 할 수있는 최종 측정 단위는 포인트 값 (pt)입니다. 포인트 값은 인쇄 CSS 전용입니다! 포인트는 실제 잉크 용지 인쇄술에 사용되는 측정 단위입니다. 72pts = 1 인치 1 인치 = 눈금자와 같은 실제 인치. 화면에 1 인치가 아닌 해상도에 따라 완전히 임의적입니다.
글꼴 크기 조정을위한 모니터에서 픽셀이 정확하지 않은 방식과 마찬가지로 포인트 크기는 용지에서 정확하지 않습니다. 페이지를 인쇄하는 동안 최상의 크로스 브라우저 및 크로스 플랫폼 결과를 얻으려면 인쇄 스타일 시트를 설정하고 모든 글꼴의 크기를 포인트 크기로 조정하십시오.
좋은 측정을 위해 화면 표시에 포인트 크기를 사용하지 않는 이유는 (모호하지 않음) 크로스 브라우저 결과가 크게 달라지기 때문입니다.
px
세밀한 제어가 필요한 경우 픽셀 값 (px)으로 글꼴 크기를 조정하는 것이 좋습니다 (내가 가장 좋아하는 것). 컴퓨터 화면에서는 단일 픽셀보다 더 정확하지 않습니다. 크기 조정 글꼴을 픽셀 단위로 사용하면 문자 그대로 브라우저에서 해당 픽셀 수만큼 문자를 렌더링하도록 지시합니다.
Windows, Mac, 앨리어싱 처리, 앤티 앨리어싱 처리, 크로스 브라우저는 중요하지 않습니다. 14px로 설정된 글꼴의 크기는 14px입니다. 그러나 여전히 약간의 변화가 없다고 말하는 것은 아닙니다. 아래의 빠른 테스트에서 결과는 키워드보다 약간 더 일관성이 있지만 동일하지는 않습니다.
픽셀 값의 특성으로 인해 캐스케이드되지 않습니다. 부모 요소의 픽셀 크기가 18px이고 자식이 16px 인 경우 자식은 16px입니다. 그러나 글꼴 크기 설정을 조합하여 사용할 수 있습니다. 예를 들어, 부모가 16px로 설정되고 자식이 더 크게 설정되면 자식은 실제로 부모보다 크게 나옵니다. 빠른 테스트에서 나에게 이것을 보여주었습니다.
“크게”는 부모의 16px를 20px로 25 % 증가 시켰습니다.
과거 픽셀은 접근성 및 사용 편의성 문제로 인해 잘못 포장되었습니다. IE 6 이하에서는 픽셀 단위로 설정된 글꼴 크기를 사용자가 조정할 수 없습니다 . 그것은 우리가 엉덩이 건강하고 젊은 디자이너가 12px로 유형을 설정하고 화면에서 잘 읽을 수 있다는 것을 의미합니다. 이것은 실제로 우리가 아닌 IE 6의 잘못이지만, 우리는 우리가 얻은 것을 얻었고 그것을 처리해야합니다.
글꼴 크기를 픽셀 단위로 설정하는 것이 가장 정확하고 가장 만족스러운 방법이지만 사이트에서 여전히 IE 6을 사용하는 방문자 수와 접근성 요구를 고려하십시오. 우리는 더 이상 이것에 신경 쓰지 않아도되는 최첨단에 있습니다.
답변
pt는 1/72 인치이며 DPI를 올바르게 계산하지 않는 장치에서 렌더링되는 모든 항목에 대한 쓸모없는 측정입니다. 따라서 인쇄에 적합한 선택이며 화면에서 사용하기에 두려운 선택입니다.
px는 픽셀로 대부분의 경우 화면 픽셀에 매핑됩니다.
CSS는 다른 많은 단위를 제공하며 크기를 설정하는 대상에 따라 선택해야하는 단위가 있습니다.
이미지와 일치하도록 크기를 조정해야하거나 얇은 테두리를 원할 경우 픽셀이 좋습니다.
일정하게 사용하면 글꼴 크기가 사용자의 선호도에 비례하므로 글꼴 크기에 대한 백분율이 좋습니다.
글꼴 크기를 기준으로 요소 자체의 크기를 조정하려는 경우 Em이 좋습니다 (글꼴 크기가 크면 단락이 더 넓어 질 수 있음)
… 등등.
답변
pt는 역사적으로 크기가 1/72 인치의 대략적인 측정치를 갖는 “포인트”에서 크기가 일반적으로 “측정 된”인쇄 유형의면에 사용 된 “포인트”의 도출 (약어)이며, 따라서 72는 포인트 글꼴의 크기는 1 인치입니다.
px는 화면이나 도트 매트릭스 프린터 또는 도트 형식으로 렌더링되는 다른 프린터 또는 장치에서 단순한 “점”인 “픽셀”의 약자입니다. 리본을 눌러 캐릭터의 각인을 남겼으므로 고정 된 크기의 이미지가 남습니다.
요점과 밀접한 관련이있는 용어는 대문자와 소문자로, 역사적으로 대문자가 아닌 문자 위의 상자 (케이스)에 “자본”문자가 배치 된 고정 인쇄 문자 선택과 관련이있었습니다. 아래 상자에 “낮은”경우.
서로 다른 활자체 글꼴과 크기에 대해 서로 다른 상자 (케이스)가 있었지만 각각에 대해 “상위”와 “하위”의 경우가있었습니다.
다른 용어는 글꼴에서 한 문자의 측정 값 인 “pica”입니다. 따라서 pica는 1/6 인치 또는 12 포인트 측정 단위 (12/72)입니다.
놀랍게도 측정은 4.233mm 또는 0.166 인치 컴퓨터에서 이루어 지지만 구식 포인트 (미국식)는 1 / 72.27 인치이고 프랑스어는 4.512mm (0.177 인치)입니다. 따라서 측정에 관한 “대략적인”진술.
또한, 사무실에서 사용되는 타자기는 “엘리트”또는 “피카”크기를 가졌으며 크기는 인치당 10 및 12 문자였습니다.
또한 표준화 이전의 “점”은 금속 타이포 그래프의 “발”크기, 한 문자의 기본 외곽 설정 크기를 기반으로했으며 크기가 약간 다릅니다.
인쇄상의 “발”은 원래 사망 한 프린터의 실제 발에서 나온 것입니다. 활자체에는 72 피카 또는 864 개의 점이 있습니다.
CSS 사용에 관해서는 px 또는 pt 대신 EM을 사용하는 것을 선호하므로 상대 위치 및 크기의 손실없이 크기 조절의 이점을 얻습니다.
편집 : 완전성을 위해 EM (em)을 하나의 글꼴 높이를 측정하는 요소로 생각할 수 있으므로 12pt 글꼴의 경우 1em은 해당 글꼴의 높이이고 2em은 해당 높이의 두 배입니다. 12px 글꼴의 경우 2em은 24 픽셀입니다. SO 10px는 일반적으로 표준 글꼴 크기로 16px = 1em을 기준으로 “가장”브라우저 인 표준 글꼴 0.63em입니다.
답변
