Giá trị css tương đối. Đơn vị CSS (pixel, Em và Ex) và hàm calc. Ví dụ
Sử dụng thuộc tính font-size để chia tỷ lệ văn bản là một trong những khía cạnh khó khăn nhất tạo kiểu trong CSS. CSS cung cấp bốn đơn vị để đo kích thước văn bản hiển thị trong trình duyệt web. Đơn vị nào trong bốn đơn vị này phù hợp nhất cho tài liệu web? Vấn đề này đã gây ra rất nhiều tranh luận và tranh cãi. Thật khó để đưa ra một câu trả lời chắc chắn cho một câu hỏi như vậy.
Làm quen với các đơn vị
- Phần trăm ( % ): Phần trăm rất giống với em , ngoại trừ một vài điểm khác biệt chính. Đầu tiên, kích thước phông chữ hiện tại là 100% (tức là 12pt = 100%). Sử dụng đơn vị Tỷ lệ phần trăm cho phép bạn phóng to/thu nhỏ văn bản để dễ đọc hơn.
Ừm ( em): em là đơn vị có thể mở rộng được sử dụng cho các tài liệu web. Một em bằng cỡ chữ hiện tại. Ví dụ: nếu cỡ chữ của tài liệu là 12pt thì 1em bằng 12pt. Vì em được chia tỷ lệ nên 2em bằng 24pt, .5em bằng 6pt, v.v. Do khả năng mở rộng và khả năng tương thích cao với các thiết bị di động nên em ngày càng được sử dụng nhiều trong các tài liệu web.
Điểm ảnh ( px): Pixel là đơn vị có kích thước cố định được sử dụng cho mọi thứ được đọc trên màn hình máy tính. Một pixel bằng một chấm trên màn hình máy tính (đây là mức chia nhỏ nhất của độ phân giải màn hình của bạn). Nhiều nhà thiết kế web sử dụng pixel trong tài liệu web để đảm bảo rằng trang web xuất hiện hoàn hảo đến từng pixel khi hiển thị trong trình duyệt. Vấn đề duy nhất là các pixel không thể được phóng to để phù hợp với những đầu đọc có thị lực kém hoặc giảm kích thước để dễ đọc hơn trên thiết bị di động.
Điểm ( điểm): Dấu chấm được sử dụng theo truyền thống trong ấn phẩm in(tức là đối với mọi thứ được in trên giấy). Một điểm bằng 1/72 inch. Các dấu chấm rất giống với pixel ở chỗ chúng có kích thước cố định và không thể phóng to/thu nhỏ.
Có gì khác biệt?
Sự khác biệt giữa các đơn vị này rất dễ hiểu ở chỗ ví dụ cụ thể. Đây là cách chúng liên quan với nhau: 1em = 12pt = 16px = 100%. Hãy xem điều gì xảy ra khi chúng ta tăng kích thước phông chữ chính (sử dụng bộ chọn CSS nội dung) từ 100% lên 120%.
Như bạn có thể thấy, Ems và Phần trăm tăng khi kích thước phông chữ cơ bản tăng, nhưng Pixel và Dot thì không. Thật dễ dàng để sử dụng kích thước tuyệt đối cho văn bản của bạn, nhưng việc sử dụng văn bản có thể mở rộng hiển thị trên mọi thiết bị sẽ dễ dàng hơn nhiều. Vì vậy, nên sử dụng đơn vị Em và Percent cho văn bản của tài liệu web.
EM hay Tỷ lệ phần trăm?
Chúng tôi nhận thấy rằng Point và Pixel không phải là đơn vị tốt nhất cho tài liệu web. Vì vậy, chúng ta chỉ còn lại Em và Percent. Về mặt lý thuyết, Em và Percent là cùng một đơn vị, nhưng trên thực tế có những khác biệt nhỏ giữa chúng mà không thể bỏ qua.
Trong ví dụ trên, chúng tôi đã sử dụng đơn vị Tỷ lệ phần trăm làm kích thước phông chữ cơ sở (cho thẻ nội dung). Nếu bạn thay đổi kích thước cơ sở font từ Percent sang Em (tức là body ( font-size: 1em; )), thì rất có thể bạn sẽ không nhận thấy sự khác biệt. Hãy xem điều gì xảy ra khi kích thước phông chữ nội dung là 1em và khi máy khách thay đổi cài đặt "Kích thước văn bản" của trình duyệt (cài đặt này có sẵn trong một số trình duyệt, chẳng hạn như Internet Explorer).
Khi kích thước văn bản trong trình duyệt máy khách được đặt thành "trung bình", không có sự khác biệt giữa Em và Phần trăm. Nhưng nếu bạn thay đổi cài đặt này, sự khác biệt sẽ trở nên khá rõ ràng. Với cài đặt Nhỏ nhất, Ems nhỏ hơn nhiều so với Phần trăm. Và với cài đặt “Lớn nhất”, điều ngược lại là đúng - Em lớn hơn Phần trăm rất nhiều. Bạn có thể nói rằng các đơn vị Em được chia tỷ lệ như mong muốn, nhưng trên thực tế, văn bản đó được chia tỷ lệ quá rõ ràng và trên một số thiết bị, văn bản nhỏ nhất sẽ không thể đọc được.
Phần kết luận
Về lý thuyết, đơn vị Em là tiêu chuẩn mới cho kích thước phông chữ trong tài liệu web, nhưng trên thực tế, đơn vị Phần trăm thân thiện với người dùng hơn. Khi cài đặt máy khách thay đổi, văn bản sử dụng đơn vị Tỷ lệ phần trăm sẽ chia tỷ lệ phù hợp, cho phép nhà thiết kế duy trì khả năng đọc, khả năng truy cập và thiết kế trực quan.
Người chiến thắng: tỷ lệ phần trăm (%).
Thông thường khi tôi tạo thiết kế mới sau đó đối với phần tử nội dung, tôi sử dụng tỷ lệ phần trăm (nội dung ( font-size: 62,5%; )) và sau đó sử dụng em để chia tỷ lệ hơn nữa. Miễn là cài đặt nội dung được đặt thành Tỷ lệ phần trăm, bạn có thể sử dụng Tỷ lệ phần trăm hoặc Em cho bất kỳ quy tắc và bộ chọn CSS nào khác mà vẫn tận dụng được lợi ích của việc sử dụng Tỷ lệ phần trăm làm kích thước phông chữ chính của mình.
Trong vài năm qua, cách làm này đã trở nên rất phổ biến trong thiết kế web.
Pixel hiện được sử dụng làm đơn vị kích thước phông chữ hợp lệ (người dùng có thể sử dụng tính năng "thu phóng" của trình duyệt để đọc văn bản nhỏ). Tuy nhiên, việc sử dụng pixel trở thành vấn đề do thiết bị di động có màn hình rất lớn. mật độ cao pixel (một số thiết bị Android và iPhone có mật độ 200-300 pixel mỗi inch, khiến phông chữ 11 và 12 pixel khó đọc). Vì vậy, tôi tiếp tục sử dụng Percentage làm cỡ chữ chính cho các tài liệu web.
Một trong những khía cạnh khó hiểu nhất CSS là ứng dụng cỡ chữ thuộc tính để chia tỷ lệ văn bản. Sử dụng CSS, bạn có thể thay đổi kích thước văn bản trong trình duyệt bằng bốn đơn vị đo lường khác nhau. Đơn vị nào trong bốn đơn vị này là tốt nhất cho web? Đây là một câu hỏi đã gây ra nhiều cuộc thảo luận và chỉ trích khác nhau. Tìm một câu trả lời dứt khoát là khó vì bản thân câu hỏi đã phức tạp.
Gặp gỡ các đơn vị
1. "Ems" (em): "em" là đơn vị có khả năng mở rộng được sử dụng trong các tài liệu web. "em" bằng cỡ chữ hiện tại, ví dụ: nếu cỡ chữ trong tài liệu là 12pt thì 1em bằng 12pt. Về bản chất, "em" có khả năng mở rộng nên 2em sẽ bằng 24pt, 0,5em sẽ bằng 6pt, v.v. Việc sử dụng "em" ngày càng trở nên phổ biến trong các tài liệu web do khả năng mở rộng và khả năng hữu ích của nó trên thiết bị di động.2. Pixel (px): “px” là các đơn vị có kích thước cố định được sử dụng trên màn hình (chẳng hạn như để đọc trên màn hình máy tính). Một pixel bằng một dấu chấm trên màn hình máy tính của bạn (phần tử nhỏ nhất trong độ phân giải màn hình của bạn). Nhiều nhà thiết kế web sử dụng px trong tài liệu web để đạt được sự thể hiện hoàn hảo đến từng pixel cho trang web của họ khi hiển thị trong trình duyệt. Một trong những vấn đề khi sử dụng px là các đơn vị này không cho phép chia tỷ lệ cho người đọc hoặc thiết bị di động khiếm thị.
3. Điểm (pt): "pt", theo truyền thống được sử dụng trong phương tiện in ấn (bất cứ thứ gì cần in trên giấy, v.v.). Một "pt" bằng 1/72 inch. "pt", giống như "px", có kích thước đơn vị cố định và không thể chia tỷ lệ.
4. Phần trăm (%): Đơn vị phần trăm tương tự như "em" ngoại trừ một số khác biệt chính. Đầu tiên, cỡ chữ hiện tại là 100% (tức là 12pt = 100%). Bằng cách sử dụng "%", văn bản của bạn sẽ có khả năng mở rộng hoàn toàn cho thiết bị di động và sự thân thiện với người dùng (khả năng truy cập).
Vậy sự khác biệt là gì?
Sẽ dễ dàng hiểu được sự khác biệt giữa các đơn vị kích thước phông chữ khi bạn nhìn thấy chúng hoạt động. Thông thường, 1em = 12pt = 16px = 100%. Sử dụng các cỡ chữ này, hãy xem điều gì xảy ra khi bạn tăng cỡ chữ cơ bản (từ sử dụng CSS bộ chọn nội dung) từ 100% đến 120%.Thay đổi cỡ chữ từ 100% thành 120%.
Như bạn có thể thấy, "em" và "%" đã tăng kích thước phông chữ, trong khi "px" và "pt" thì không. Việc đặt kích thước tuyệt đối cho văn bản của bạn có thể dễ dàng nhưng sẽ tốt hơn nhiều nếu khách truy cập sử dụng văn bản có thể mở rộng có thể hiển thị trên bất kỳ thiết bị hoặc máy nào. Vì lý do này, đơn vị "em" và "%" được ưu tiên sử dụng cho văn bản của tài liệu web.
"em" so với "%"
Chúng tôi phát hiện ra rằng các đơn vị “px” và “pt” không phải là Cách tốt nhất có thể phù hợp với các tài liệu web, buộc chúng ta phải sử dụng "em" và "%". Về lý thuyết, đơn vị "em" và "%" giống hệt nhau, nhưng trên thực tế, chúng có những khác biệt nhỏ cần được xem xét.Trong ví dụ trên, chúng tôi đã sử dụng tỷ lệ phần trăm (trong thẻ nội dung) làm đơn vị kích thước phông chữ cơ bản. Nếu bạn thay đổi đơn vị kích thước phông chữ cơ bản từ "%" thành "em" (nghĩa là nội dung (cỡ chữ: 1em;)), thì bạn, nên không nhận thấy sự khác biệt. Hãy xem điều gì xảy ra khi "1em" là đơn vị cơ sở của chúng tôi và khi khách hàng thay đổi "Kích thước phông chữ" trong cài đặt trình duyệt của họ (nhiều trình duyệt, chẳng hạn như Internet Explorer, có tùy chọn này).
Kích thước phông chữ khi khách hàng thay đổi kích thước văn bản trong trình duyệt.
Khi kích thước văn bản được đặt thành "trung bình" trong trình duyệt máy khách, không có sự khác biệt đáng chú ý giữa "em" và "%". Tuy nhiên, nếu thay đổi tham số, sự khác biệt sẽ trở nên rất lớn. Khi đặt thành “Nhỏ nhất”, “em” nhỏ hơn nhiều so với “%”, và khi đặt thành “Lớn nhất”, ngược lại, “em” hiển thị lớn hơn “%”. Và trong khi nhiều người tranh luận rằng các đơn vị trong tỷ lệ "em" như dự định, thì trên thực tế, văn bản trong "em" có tỷ lệ quá lớn, khiến cho văn bản nhỏ nhất trở nên không đọc được trên một số máy.
Phán quyết
Về lý thuyết, đơn vị “em” là tiêu chuẩn cỡ chữ mới và sắp ra mắt trên web, nhưng trên thực tế, đơn vị “%” cho phép văn bản được hiển thị nhất quán và thuận tiện hơn cho người dùng. Khi thay đổi tham số của khách hàng, văn bản trong "%" thay đổi theo tỷ lệ hợp lý, cho phép nhà thiết kế duy trì khả năng đọc, khả năng truy cập và thiết kế.Người chiến thắng: phần trăm (%).
Xin chào các độc giả thân mến của blog webcodius! Để đặt các kích cỡ khác nhau phần tử html trang, có đơn vị đo lường trong CSS. Hơn nữa, cả đơn vị tương đối và tuyệt đối đều có thể được sử dụng.
Đơn vị tuyệt đốiđược kết nối với thế giới vật lý và độc lập với thiết bị đầu ra. Các đơn vị sau đây có thể được sử dụng để chỉ ra chúng:
Đơn vị tuyệt đối được sử dụng ít thường xuyên hơn đơn vị tương đối và được sử dụng chủ yếu để đặt kích thước văn bản. Và để biểu thị kích thước của văn bản, họ chủ yếu sử dụng một điểm (pt), có được bằng cách chia một inch thành 72 phần. Ngược lại, một inch tương ứng bằng khoảng 25,4 mm, một điểm xấp xỉ bằng một phần ba milimét. Ví dụ sử dụng đơn vị đo tuyệt đối:
Kích thước 12 mm
Kích thước 1 cm
Kích thước 1 inch
Kích thước 24 điểm
Kích thước 1 đỉnh
Đơn vị đo lường tương đối
Để hiển thị thông tin trên màn hình, tốt hơn nên sử dụng các đơn vị đo lường tương đối. Vì kích thước vật lý của các chấm (pixel) tạo nên hình ảnh trên màn hình có thể khác nhau tùy thuộc vào loại và Kích thước vật lý cùng một màn hình này. Ngoài ra kích thước pixel phụ thuộc vào độ phân giải được thiết lập màn hình. Đơn vị tương đối cơ bản:
1px trong CSS, như chúng tôi đã nói ở trên, đây là một điểm trên màn hình của người dùng, đại lượng vật lýđiều này phụ thuộc vào độ phân giải của thiết bị và khoảng cách mà một người nhìn vào bề mặt của thiết bị.
Khi chỉ định tỷ lệ phần trăm, kích thước được tính tùy thuộc vào kích thước phần tử cha. Vì vậy, ví dụ: nếu chiều rộng của phần tử gốc là 500px thì nếu bạn chỉ định chiều rộng:50%, chiều rộng của phần tử sẽ là 250px.
emđược gắn với kích thước phông chữ mặc định của trình duyệt hoặc kích thước phông chữ của phần tử gốc. MỘT bán tại là chiều cao của chữ in hoa (nhỏ) "x" (x) trong bố cục Latinh. Tức là em cũng bị ràng buộc với cỡ chữ mặc định của trình duyệt hoặc cỡ chữ của phần tử gốc. Ví dụ:
Kích thước 20 pixel
Kích thước 150%
Kích thước 2 em
Kích thước 2 cũ
Kết quả:
Ngoài những điều trên, còn có một nhóm đơn vị tương đối gắn với kích thước của khung nhìn trình duyệt:
Ví dụ về việc sử dụng:
Kích thước 2 vw
Kích thước 2vh
Kích thước 2 vmin
Kích thước 2 vmax
hàm calc()
Được sử dụng để chỉ định một giá trị được tính toán Thuộc tính CSS, sử dụng một số làm giá trị. Trước hết, calc có thể được sử dụng để tính kích thước, góc và thời gian. Hơn nữa, chức năng này cho phép bạn kết hợp các đơn vị đo lường khác nhau, ví dụ: chiều rộng của div có thể được đặt như thế này:
div(
chiều rộng: calc (100% - 40px);
}
Trong trường hợp này, chiều rộng của div sẽ bằng chiều rộng của phần tử gốc trừ đi 40 pixel.
Bạn có thể sử dụng các phép tính số học sau trong biểu thức:
- + - phép cộng. Ký tự được phân tách bằng dấu cách ở cả hai bên (height: calc (20% + 50px));
- — — phép trừ. Ký tự được phân tách bằng dấu cách ở cả hai bên (width: calc (90% - 10px););
- * — phép nhân (phần đệm: calc (2em*2););
- / - phân công. Việc chia cho số 0 bị cấm (chiều rộng: calc (100%/4);).
TRONG Trình duyệt Firefox lên đến phiên bản 16.0, chức năng -moz-calc được hỗ trợ, trong Chrome lên đến phiên bản 26.0 và trong Safari kể từ phiên bản 6.0 -webkit-calc được hỗ trợ.
Ví dụ: trong bố cục trang web hai cột linh hoạt, chúng ta cần đảm bảo rằng có khoảng cách 50px giữa các cột ở bất kỳ kích thước nào của cửa sổ trình duyệt. Sau đó với sự giúp đỡ hàm tính toánĐiều này được thực hiện như sau:
Bạn có thể chỉ định độ dài trong CSS trong đơn vị khác nhau. Một số trong số chúng đến từ truyền thống đánh máy, như điểm (pt) và pica (pc), một số khác, vd. centimet (cm) và inch (in) quen thuộc với chúng ta trong sử dụng hàng ngày. Ngoài ra còn có một đơn vị “ma thuật” được phát minh riêng cho CSS: px. Điều này có nghĩa là các thuộc tính khác nhau yêu cầu các đơn vị khác nhau?
Không, đơn vị đo không liên quan đến thuộc tính mà liên quan trực tiếp đến phương tiện hiển thị: màn hình hoặc giấy.
Bất kỳ đơn vị đo lường nào cũng có thể được sử dụng ở bất cứ đâu. Thuộc tính có giá trị tính bằng pixel (lề: 5px) cũng chấp nhận các giá trị tính bằng inch hoặc cm (lề: 1,2in; lề: 0,5cm) và ngược lại.
Nhưng nói chung, tốt hơn nên sử dụng các bộ đơn vị khác nhau để hiển thị trên màn hình và để in. Lời khuyên cho việc sử dụng các đơn vị được tóm tắt trong bảng sau:
Mối quan hệ giữa các đơn vị tuyệt đối là: 1in = 2,54cm = 25,4mm = 72pt = 6pc
Nếu có sẵn thước kẻ, bạn có thể kiểm tra độ chính xác của thiết bị. Đây là hình chữ nhật cao 1 inch (2,54cm):
72 điểm
↓
Cái gọi là đơn vị tuyệt đối (cm, mm, in, pt và pc) trong CSS có nghĩa giống như mọi nơi khác, nhưng chỉ khi thiết bị đầu ra có độ phân giải đủ cao. Trên máy in laser, 1cm phải chính xác bằng 1 centimet. Nhưng trên các thiết bị độ phân giải thấp, giống như màn hình máy tính, CSS không yêu cầu điều này. Thực vậy, các thiết bị khác nhau và khác nhau Triển khai CSS cố gắng hiển thị chúng một cách khác nhau. Tốt hơn là nên để những thiết bị này cho các thiết bị có độ phân giải cao, đặc biệt là để in. Những gì bạn nhìn thấy trên màn hình máy tính và thiết bị di động có thể không như bạn mong đợi.
Trước đây, CSS yêu cầu các đơn vị tuyệt đối phải được hiển thị chính xác ngay cả trên màn hình máy tính. Nhưng vì có nhiều cách triển khai sai hơn những cách triển khai đúng và không có cải tiến nào được mong đợi nên CSS đã từ bỏ yêu cầu này vào năm 2011. Hiện tại, đơn vị tuyệt đối chỉ được yêu cầu hoạt động chính xác khi được in và trên các thiết bị có độ phân giải cao.
CSS không chỉ định chính xác "độ phân giải cao" nghĩa là gì. Nhưng vì máy in giá rẻ ngày nay có ít nhất 300 dpi, và màn hình tốt khoảng 200 dpi, ranh giới rất có thể nằm ở đâu đó giữa các giá trị này.
Một lý do khác để không sử dụng đơn vị tuyệt đối ở bất cứ đâu ngoại trừ trong bản in: trên màn hình khác nhau chúng ta nhìn từ những khoảng cách khác nhau. 1 cm trên màn hình máy tính desktop trông nhỏ. Nhưng trên màn hình di động ngay trước mắt bạn - đó là rất nhiều. Thay vào đó, tốt hơn nên sử dụng các đơn vị tương đối, ví dụ: em.
Đơn vị em và ex phụ thuộc vào kích thước phông chữ và có thể khác nhau đối với từng thành phần trong tài liệu. Đơn vị em chỉ đơn giản là cỡ chữ. Trong phần tử được cấp phông chữ 2in, 1em có nghĩa là 2in này. Việc chỉ định kích thước (ví dụ: đối với thụt lề) trong em có nghĩa là chúng được đặt tương ứng với phông chữ và bất kỳ phông chữ nào người dùng có đều lớn (ví dụ: màn hình lớn) hoặc nhỏ (ví dụ: trên thiết bị di động), các kích thước này sẽ vẫn tỷ lệ thuận. Các khai báo như text-indent: 1.5em và Margin: 1em trong CSS cực kỳ phổ biến.
Đơn vị cũ được sử dụng không thường xuyên. Nó thể hiện kích thước, được đo từ chiều cao x của phông chữ. Chiều cao X, nói một cách đại khái, là chiều cao chữ viết thường giống Một, c, tôi, hoặc ồ. Phông chữ với cùng cỡ(và theo đó, với cùng một em) có thể có sự khác biệt rất lớn về kích thước của các chữ cái viết thường và nếu điều quan trọng là một số hình ảnh, chẳng hạn, tương ứng với chiều cao x, thì đơn vị cũ sẽ phục vụ bạn.
Đơn vị px trong CSS thật kỳ diệu. Nó không liên quan đến phông chữ hiện tại, nhưng nó thường không liên quan đến cm hoặc inch vật lý. Đơn vị px được định nghĩa là một cái gì đó nhỏ nhưng có thể nhìn thấy được, tức là. đường chân trờiĐộ dày 1px có thể được hiển thị với các cạnh sắc nét (không khử răng cưa). Những gì được coi là rõ ràng, nhỏ và có thể nhìn thấy được tùy thuộc vào thiết bị và cách bạn sử dụng nó: bạn có cầm nó trực tiếp trước mắt hay không, làm thế nào điện thoại di động, ở khoảng cách một cánh tay, như màn hình hoặc đâu đó ở giữa, như sách điện tử? Do đó, px theo định nghĩa không phải là độ dài cố định mà phụ thuộc vào loại thiết bị và cách sử dụng thông thường của nó.
Để hiểu lý do tại sao đơn vị px lại như vậy, hãy tưởng tượng một màn hình CRT từ những năm 1990: chấm nhỏ nhất mà nó có thể hiển thị là khoảng 1/100 inch (0,25 mm) hoặc lớn hơn một chút. Đơn vị px lấy tên từ các pixel màn hình đó.
Về nguyên tắc, các thiết bị hiện tại có thể hiển thị các chấm nhỏ hơn, rõ ràng hơn (mặc dù khó có thể nhìn thấy chúng nếu không có kính lúp). Nhưng các tài liệu từ thế kỷ trước sử dụng px trong CSS trông giống nhau bất kể thiết bị nào. Máy in nói riêng có thể hiển thị rõ ràng các dòng mỏng hơn nhiều so với 1px, nhưng ngay cả trên máy in, dòng 1px trông gần giống như trên màn hình. Các thiết bị thay đổi nhưng đơn vị px luôn giống nhau.
Trên thực tế, CSS yêu cầu 1px phải chính xác bằng 1/96 inch trong bất kỳ bản in nào. Trong CSS, người ta tin rằng máy in, không giống như màn hình, không cần kích cỡ khác nhauđể px hiển thị các dòng rõ ràng. Do đó, khi được in, px không chỉ trông giống nhau bất kể thiết bị nào mà còn được đo bằng cùng một giá trị (giống như các đơn vị cm, pt, mm, in và pc, như đã giải thích).
CSS cũng định nghĩa rằng hình ảnh raster(ví dụ: ảnh) được hiển thị theo mặc định ở tỷ lệ 1 pixel của hình ảnh x 1px. Một bức ảnh có độ phân giải 600 x 400 sẽ có chiều rộng 600px và chiều cao 400px. Do đó, các pixel của ảnh không được gắn với các pixel của thiết bị đầu ra (có thể rất nhỏ) mà với các đơn vị px. Điều này cho phép bạn căn chỉnh chính xác hình ảnh với các thành phần tài liệu khác, miễn là bạn sử dụng đơn vị px theo kiểu của mình thay vì pt , cm , v.v.
Để đặt kích thước của các phần tử khác nhau, CSS sử dụng đơn vị đo lường tuyệt đối và tương đối. Đơn vị tuyệt đối độc lập với thiết bị đầu ra, nhưng đơn vị tương đối xác định kích thước của một phần tử so với giá trị của kích thước khác.
Đơn vị tương đối
Đơn vị tương đối thường được sử dụng để làm việc với văn bản hoặc khi bạn cần tính toán phần trăm giữa các phần tử. Trong bảng 1 liệt kê các đơn vị tương đối chính.
Một giá trị biến phụ thuộc vào kích thước phông chữ của phần tử hiện tại (nó được đặt thông qua thuộc tính kiểu phông chữ). Mỗi trình duyệt có kích thước văn bản tích hợp được sử dụng khi kích thước này không được chỉ định rõ ràng. Do đó, ban đầu 1em bằng cỡ chữ mặc định được đặt trong trình duyệt. Theo đó, khi thiết lập kích thước văn bản cho toàn bộ trang trong em, chúng ta làm việc với tham số này. Trong trường hợp em được sử dụng cho yếu tố cụ thể, 1em là cỡ chữ của phần tử mẹ.
ex được định nghĩa là chiều cao của ký tự "x" viết thường. ex phải tuân theo các quy tắc tương tự như em, cụ thể là nó bị ràng buộc với kích thước phông chữ mặc định của trình duyệt hoặc kích thước phông chữ của phần tử cha của nó.
Pixel là một điểm cơ bản được hiển thị bởi màn hình hoặc thiết bị khác thiết bị tương tự, ví dụ như một chiếc điện thoại thông minh. Kích thước pixel phụ thuộc vào độ phân giải của thiết bị và đặc tính kỹ thuật của thiết bị.
Ví dụ 1 cho thấy việc sử dụng các đơn vị này.
Ví dụ 1: Sử dụng đơn vị tương đối
Kích thước 2 em
Kích thước 2 cũ
Kích thước 30 pixel
Kích thước 200%
Kết quả ví dụ nàyđược hiển thị bên dưới (Hình 1).
Cơm. 1. Kích thước văn bản với các đơn vị khác nhau
Đơn vị tuyệt đối
Đơn vị tuyệt đối được sử dụng ít thường xuyên hơn đơn vị tương đối và theo quy luật, khi làm việc với văn bản. Trong bảng 2 liệt kê các đơn vị chính như vậy.
Có lẽ đơn vị phổ biến nhất là point, được dùng để biểu thị kích thước phông chữ. Nhiều người đã quen với việc đặt kích thước phông chữ trong trình soạn thảo văn bản, chẳng hạn như 12. Nhưng họ không hiểu con số này nghĩa là gì. Vì vậy, đây chính xác là những điểm, chúng có nguồn gốc. Tất nhiên, chúng không phải là nguồn gốc của chúng ta, chúng ta thường đo mọi thứ bằng milimét và các đơn vị tương tự, nhưng điểm có lẽ là giá trị duy nhất từ hệ thống đo lường phi hệ mét được sử dụng ở mọi nơi trên đất nước chúng ta. Và tất cả cảm ơn soạn thảo văn bản Và hệ thống xuất bản. Ví dụ 2 cho thấy việc sử dụng điểm và các đơn vị khác.
Ví dụ 2: Sử dụng đơn vị tuyệt đối
Kích thước 0,5 inch
Kích thước 8 mm
Kích thước 24 điểm
Kết quả của việc sử dụng đơn vị đo lường tuyệt đối được hiển thị bên dưới (Hình 2).
Cơm. 2. Kích thước văn bản với các đơn vị khác nhau
