이 글은 CSS에서 길이 단위를 적용하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
CSS에는 너비, 높이, 여백, 패딩, 테두리 너비, 글꼴 크기, 텍스트 그림자 등 길이 값을 허용할 수 있는 많은 속성이 있습니다. 사용 시나리오가 많기 때문에 CSS는 다양한 길이 단위도 제공합니다. 일부는 센티미터(cm) 및 인치(in)와 같이 일상생활에서 사용되는 단위이고, 일부는 포인트(pt) 및 파이카(pc)와 같이 인쇄 산업에서 사용되는 단위입니다. 다음과 같이: px .
사용 시나리오
그러면 이러한 속성과 단위를 어떻게 함께 사용할 수 있을까요? 특정 속성에 특정 단위가 필요한가요? 실제로는 그렇지 않습니다. 단위는 속성과 관련이 없습니다. 어떤 단위라도 동일한 속성에 적용 가능합니다. 속성이 px 단위의 값을 허용하는 경우에는 제한이 없습니다. : 여백: 5px)인 경우 인치 또는 센티미터 단위의 값(여백: 1.2in, 여백: 0.5cm)을 사용할 수도 있으며 그 반대도 가능합니다.
단위는 속성과는 관계가 없지만, 출력이 화면으로 되는지, 종이로 출력되는지 등 출력 매체와 일정한 관계가 있습니다. 화면에 표시할 때와 종이에 인쇄할 때의 권장 단위가 다릅니다. 아래 표에는 권장 사용법이 나와 있습니다.
| 출력 매체 | Recommended | 가끔 사용 | 권장되지 않음 |
|---|---|---|---|
| Screen | em, px, % | ex | 포인트, cm, mm , in, pc |
| em, cm, mm, in, pt, pc, % | px, ex |
이러한 단위는 출력 매체와의 관계 외에도 길이 값의 계산 방법에 따라 절대 단위와 상대 단위로 구분할 수 있습니다.
절대 단위
절대 단위(px, cm, mm, in, Q, pt 및 pc)는 이 단위에서 의미합니다. 길이 값 예를 들어 width: 1cm는 실제 세계의 1cm 길이와 동일합니다. 이는 또한 모든 미디어에서 절대 단위 표시 효과가 일관된다는 것을 의미합니다. 그러나 이는 이상적인 상황입니다. 브라우저마다 표시 및 CSS 구현이 다르기 때문에 절대 단위 표시가 많은 장치에서 정확하지 않습니다. px와 in의 관계는 1in=96px이기 때문에 저해상도 기기에서는 1px가 1픽셀(px라는 이름의 유래이기도 한 픽셀)의 길이, 저해상도 기기에서는 1px이 됩니다. -해상도 화면은 종종 1/96in보다 크기 때문에 px에서 계산된 다른 절대 단위 값은 정확하지 않습니다. 고해상도 장치(예: 오늘날의 고화질 화면 및 프린터)에서는 절대 단위가 더 정확하게 표시됩니다. 위의 이유로 인쇄 시 절대 단위가 더 일반적으로 사용됩니다. width: 1cm即与现实世界中的1cm长度相等，也意味着绝对单位在所有的媒介上的显示效果是一致的。但这是理想情况，受显示器和不同浏览器CSS实现的差异，在很多设备上绝对单位显示的并不精确。因为px和in的关系为1in=96px， 在低分辨率设备上，1px为1像素（pixel，也是px名称的由来）长度，而低分辨率的屏幕上1px往往大于1/96in，所以从px计算得到的其他绝对单位值都不准确。而在高分辨率设备上（如现在的高清屏和打印机）绝对单位显示得更精确。由于以上原因，绝对单位更多的是在打印时使用。
曾经，CSS要求在计算机屏幕上正确显示绝对单位。但是由于大部分厂商并不能实现这一要求，所以CSS在2011年放弃了这一要求。目前，绝对单位仅在打印和高分辨率设备上正常工作。CSS没有明确定义“高分辨率”的含义。但是，由于目前低端打印机的每英寸点数为300 dpi，而高端屏幕的每英寸点数为200 dpi，因此所谓的“高分辨率”可能介于两者之间。。
下面贴出绝对单位直接的换算公式：
1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px
作为CSS中最常用的单位，关于px还是有必要多说两句的。px的特点可以归纳如下：
在低分辨率设备上，1px = 1像素；
在高分辨率设备上，1px = 1/96in，1px不一定等于1像素（比如4.7英寸的iphone上 1px=2像素）；
对于图片显示，1px = 1图片像素，比如：一个600x400分辨率的照片的的CSS宽高即为600px和400px（在4.7英寸iphone上要用1200x800个像素点显示）；
相对单位
相对单位意味着长度值是根据其他长度计算得出的。相对单位又可以分为基于字体（font based）和基于视窗（viewport based）的：
首先说说em和ex，em代表元素的当前字体大小，如果元素的font-size为2cm，那么1em即表示2cm。em可以用于控制尺寸，比如margin: 1em; text-indent:1.5em，此时这些尺寸和元素字体大小相关，因此在大屏幕上（字体尺寸较大）和小屏幕上（字体尺寸较小）会等比缩放，因此em可以用于响应式的设计。如果em直接用于font-size属性，如font-size: 2em，则em表示为父元素字体的大小。
ex很少被使用，ex表现的大小与字体的x-height相关。x-height大致等于字体中小写字母（例如a，c，m或o）的高度。相同font-size
옛날에는 CSS에서 절대 단위가 컴퓨터 화면에 올바르게 표시되도록 요구했습니다. 그러나 대부분의 제조업체가 이 요구 사항을 구현할 수 없었기 때문에 CSS는 2011년에 이 요구 사항을 포기했습니다. 현재 절대 단위는 인쇄 및 고해상도 장치에서만 제대로 작동합니다. CSS는 "고해상도"가 무엇을 의미하는지 명확하게 정의하지 않습니다. 그러나 현재 저가형 프린터의 인치당 도트 수는 300dpi이고 고급형 화면의 인치당 도트 수는 200dpi이므로 소위 "고해상도"는 아마도 그 사이에 있을 것입니다. .절대 단위의 직접 변환 공식은 아래에 게시되어 있습니다.
li>
상대 단위는 길이 값이 다른 길이를 기준으로 계산된다는 의미입니다. 상대 단위는 글꼴 기반과 뷰포트 기반으로 나눌 수 있습니다.
#🎜🎜#Font Based#🎜🎜##🎜🎜#em, ex#🎜🎜##🎜🎜# em과 ex em에 대해 먼저 이야기해 보겠습니다. 요소의 현재 글꼴 크기를 나타냅니다. 요소의
font-size가 2cm인 경우 1em는 2cm를 의미합니다. . em은 margin: 1em; text-indent:1.5em과 같이 크기를 제어하는 데 사용할 수 있습니다. 이때 이러한 크기는 요소의 글꼴 크기와 관련이 있으므로 큰 화면(더 큰 화면)에서는 글꼴 크기) 및 작은 화면 위쪽(더 작은 글꼴 크기)은 비례적으로 크기가 조정되므로 반응형 디자인에 em을 사용할 수 있습니다. em이 font-size: 2em와 같이 font-size 속성에서 직접 사용되는 경우 em은 상위 요소의 글꼴 크기로 표시됩니다. #🎜🎜##🎜🎜#ex는 거의 사용되지 않으며, ex로 표현되는 크기는 글꼴의 x 높이와 관련이 있습니다. x 높이는 글꼴의 소문자(예: a, c, m, o) 높이와 대략 같습니다. 동일한 글꼴 크기를 가진 다른 글꼴의 x 높이는 매우 다를 수 있으므로 ex를 사용할 때의 효과에는 큰 불확실성이 있습니다. #🎜🎜##🎜🎜#rem#🎜🎜##🎜🎜#CSS는 2013년에 새로운 단위 rem을 만들었습니다. rem은 루트 요소(html 요소)의 글꼴 크기를 나타내며, 각 요소에서는 em이 다를 수 있습니다. 하지만 렘도 똑같아. 이 기능으로 인해 rem은 이제 반응형 디자인에서 더 널리 사용됩니다. #🎜🎜##🎜🎜#ch#🎜🎜##🎜🎜#ch는 CSS3에 새로 추가된 단위이며 현재 글꼴에서 "0"(영, 유니코드 문자 U+0030)을 나타냅니다. . #🎜🎜##🎜🎜#Viewport Based#🎜🎜##🎜🎜#vw, wh, vmin, vmax#🎜🎜##🎜🎜#은 모두 CSS3에 새로 추가된 단위입니다. vw, vh는 창 크기에 따라 글꼴 크기를 조정할 수 있습니다. vw는 창 너비의 1/100이고 vh는 창 높이의 1/100입니다. 그리고 vw와 vh 중 작은 것을 뜻하는 vmin이 있고 그 반대가 vmax이다. 이 단위는 대부분의 최신 브라우저에서 지원됩니다. #🎜🎜##🎜🎜##🎜🎜#위 내용은 CSS의 길이 단위 적용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
