Đơn vị đo lường trong html. Em Đơn vị sức mạnh trong CSS

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%. Khi sử dụng các cỡ chữ này, hãy xem điều gì xảy ra khi bạn tăng kích thước cơ sở phông chữ (có 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 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 (%).

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 centimet trông có vẻ nhỏ bé trên màn hình máy tính để bàn. 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 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.

Do thói quen phổ biến của các nhà phát triển là sử dụng giá trị pixel, chúng tôi không nghĩ mọi người đều hiểu mục đích thực sự của tham số em và cách chúng hoạt động trong CSS.

Trong khi biên soạn một số hướng dẫn, bằng cách nào đó chúng tôi đã phải giải quyết những ý nghĩa này, vì vậy hôm nay chúng tôi có điều muốn nói với bạn. Chúng tôi hy vọng rằng hướng dẫn của chúng tôi hôm nay sẽ giúp bạn vén bức màn về một kỹ thuật tiện lợi và chu đáo được thiết kế để phát triển các dự án web.

định nghĩa của em

Thông số kỹ thuật giới thiệu khá nhiều tham số em:

Bằng giá trị cỡ chữ được tính toán áp dụng cho phần tử

Nói cách khác, nếu chúng ta có mã CSS sau:

Yếu tố (
cỡ chữ: 20px;
}
Điều này có nghĩa là 1em được đặt trong phần tử đó hoặc bất kỳ phần tử nào của nó phần tử con, sẽ bằng 20 pixel. .

Nếu bạn sử dụng đoạn mã sau:

Yếu tố (
cỡ chữ: 20px;
chiều rộng: 4em;
chiều cao: 4em;
}
Điều này có nghĩa là chiều rộng và chiều cao của phần tử (được chỉ định ở đây là 4em x 4em) sẽ là 80px x 80px (20px * 4 = 80px).

Chúng ta hãy xem xét kỹ hơn

Chìa khóa để ghi nhớ là mục đích và nguồn gốc của em thông số này. Tiếp theo:

Em là đơn vị thay đổi trong nhà in bằng dòng điện kích thước quy định nét chữ. Tên em gắn liền với chữ M. Đơn vị này ban đầu được bắt nguồn từ độ rộng chữ viết hoa M khi sử dụng một phông chữ cụ thể

Tài liệu tiếp tục giải thích rằng mặc dù tên ban đầu được dựa trên chiều rộng của chữ M nhưng điều này không còn quan trọng nữa. Kể từ ngày nay đơn vị đo em được liên kết với kích thước điểm của phông chữ.

sử dụng phương pháp này tính toán, không có định nghĩa chính xác trong tệp CSS về em là gì. Ý nghĩa của đơn vị này phụ thuộc vào cách xây dựng Cascading Style Sheets của bạn. Về lý thuyết, nếu bạn chỉ định độ dài của tất cả các phần tử trong đơn vị em, thì chỉ thay đổi kích thước phông chữ cũng đủ để “phá hủy” tất cả đánh dấu pixel hoàn hảo của bạn.

Nếu tôi không sử dụng tham số cỡ chữ thì sao?

Trong ví dụ trên và trong JSBin mà chúng tôi đã liên kết tới, tham số font-size được chỉ định chính xác. Đơn vị em sau đó được lấy từ tham số "cơ sở". Nhưng nếu phần tử không có tham số kích thước phông chữ chính xác thì sao?

Trong trường hợp này, do tham số font-size được kế thừa trong toàn bộ cây tài liệu nên giá trị của đơn vị em sẽ được lấy từ tham số được kế thừa. Nếu không đề cập đến kích thước phông chữ trong toàn bộ tài liệu thì giá trị của một đơn vị em sẽ là 16 pixel, đây là giá trị mặc định (và chúng tôi tin rằng giá trị này không khác nhau giữa các trình duyệt).

"rem" phải là tự động đối với mọi người

Đã đến lúc mang đến một bổ sung mới cho CSS: . Đơn vị này (tên bắt nguồn từ “root em”) được hỗ trợ hoàn hảo trong tất cả các trình duyệt: IE9+, FF3.6+, Chrome, Safari 5+ và Opera 11.6+.

Nhìn chung, đơn vị này rất dễ hiểu. Nó cung cấp cho bạn khả năng tạo các giá trị đơn vị em trong toàn bộ tài liệu HTML dựa trên một giá trị "chính" được chỉ định trong " html"-yếu tố. Bằng cách này, bạn có thể quên tham số font-size vì tất cả các đơn vị em được sử dụng trong tài liệu sẽ dựa trên giá trị rem chính, ví dụ:

Html (cỡ chữ: 62,5%; )
nội dung ( cỡ chữ: 1.4rem; ) /* =14px */
h1 ( cỡ chữ: 2.4rem; ) /* =24px */
Và, như với em, nếu bạn không chỉ định giá trị cỡ chữ trong " html", đơn vị "root em" sẽ có kích thước mặc định là 16 pixel.

Carpe di-em

Bạn có thể nghĩ ra rất nhiều cách diễn đạt khác với em :)

Sau nhiều năm làm việc trong lĩnh vực phát triển trang web, cuối cùng chúng tôi cũng có thể từ bỏ giá trị cố định chiều rộng. Mặc dù nhiều người đã chuyển sang phát triển thiết kế thích ứng, mọi người vẫn thỉnh thoảng sử dụng các giá trị pixel. Mặc dù điều này có thể đủ cho các thành phần mẫu nhưng chúng tôi cho rằng kiểu chữ cần được dịch hoàn toàn sang giá trị em.

Mặc dù chúng ta có thể tạo toàn bộ mẫu bằng cách sử dụng các đơn vị em, nhưng đối với chúng ta, có vẻ như trong mẫu thích ứng vẫn tốt hơn nếu sử dụng các giá trị pixel và phần trăm và, như đã lưu ý, hãy sử dụng em cho kiểu chữ.

Vì vậy, chúng tôi hy vọng bạn thích bài hướng dẫn hôm nay của chúng tôi và áp dụng những gì bạn đã học vào.

Đừng quên bình luận!

Các đơn vị tương đối mới đã được thêm vào CSS3 như vh , vw , vmin , vmax . Các đơn vị này được tính tương ứng với kích thước của cửa sổ trình duyệt. Vì máy tính để bàn chiều rộng cửa sổ trình duyệt chiều rộng hơn khung nhìn (chiều rộng của thanh cuộn được thêm vào), vì vậy nếu bạn đặt chiều rộng của phần tử thành 100vw, nó sẽ vượt xa html.

Cơm. 1. Ảnh nền toàn màn hình có chiều rộng 100vw

Hỗ trợ trình duyệt

I E: 9.0 ngoại trừ vmax, sử dụng vm thay vì vmin
Bờ rìa: 12.0 ngoại trừ vmax, sử dụng vm thay vì vmin
Firefox: 19.0
Trình duyệt Chrome: 26.0
Opera: 15.0
Cuộc đi săn: 6.1
Safari của iOS: 8.0
Android: 4.4
Trình duyệt Chrome dành cho Android: 55.0

1. Đơn vị vh và vw

Kỹ thuật thiết kế web đáp ứng dựa trên việc sử dụng các giá trị phần trăm. Nhưng sự quan tâm còn xa Quyết định tốt nhất cho từng trường hợp, vì chúng được tính toán tương ứng với kích thước của điểm gần nhất phần tử cha. Vì vậy, nếu bạn muốn sử dụng chiều cao và chiều rộng của cửa sổ trình duyệt, tốt hơn nên sử dụng đơn vị vh và vw. Ví dụ: nếu chiều cao cửa sổ trình duyệt là 900px thì 1vh sẽ là 9px. Tương tự, nếu chiều rộng cửa sổ trình duyệt là 1600px thì 1vw sẽ là 16px.

1.1. Hình nền toàn màn hình đáp ứng

Vì chiều rộng của phần tử được chỉ định bằng 100vw lớn hơn chiều rộng của khung nhìn, để tạo toàn màn hình hinh nên Tốt hơn nên sử dụng chiều rộng 100%, chiều rộng này sẽ bằng chiều rộng của phần tử html gốc.

Toàn màn hình-bg ( nền: url(image.jpg); vị trí nền: giữa; kích thước nền: bìa; chiều rộng: 100%; chiều cao: 100vh; ) Cơm. 2. Hình nền toàn màn hình đáp ứng

1.2. Hiệu ứng trượt toàn trang

Để tạo khối bằng toàn bộ chiều cao của cửa sổ trình duyệt, bạn cần đặt chiều cao: 100%; cho ba phần tử - html, body và trực tiếp cho chính khối đó:

Phần Html, nội dung ( chiều cao: 100%; ) ( chiều cao: 100%; )

Vì kích thước phần trăm được tính tương ứng với giá trị của các phần tử cha nên bạn cần đặt các giá trị phù hợp cho từng phần tử DOM. Đơn vị đo vh không yêu cầu chuỗi giá trị, vì giá trị của nó được tính trực tiếp tương ứng với cửa sổ trình duyệt:

Phần ( chiều cao: 100vh; )

Hiệu ứng lật qua các slide khi bạn click vào mũi tên được thực hiện bằng cách sử dụng kịch bản nhỏ jQuery:

JQuery(document).ready(function($) ( $("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window ).scrollTop() + $(window).height(); ) if ($(this).hasClass("top")) ( var movePos = $(window).scrollTop() - $(window).height( ); ) $("html, body").animate(( ScrollTop: movePos), 600); )); ));

Chiều cao được chỉ định bằng vh cũng có thể được sử dụng để căn giữa một phần tử trên trang.

CSS sử dụng các đơn vị tuyệt đối và tương đối để định kích thước các phần tử khác nhau. Đơ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. Trong bảng 1 liệt kê các đơn vị tương đối chính.

Đơn vị em là giá trị thay đổi, tùy thuộc vào kích thước phông chữ của phần tử hiện tại (kích thước đượ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ủa trình duyệt hoặc cỡ chữ của phần tử gốc. Ký hiệu phần trăm giống hệt với em, trong đó giá trị của 1em và 100% bằng nhau.

Đơn vị cũ đượ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ó.

Đơn vị ch bằng độ rộng của ký tự "0" đối với phần tử hiện tại và giống như em, phụ thuộc vào kích thước phông chữ.

Sự khác biệt giữa em và rem như sau. em phụ thuộc vào kích thước phông chữ của phần tử gốc và thay đổi theo nó, còn rem được gắn với phần tử gốc, tức là kích thước phông chữ được chỉ định cho phần tử html.

Ngoài ra còn có một nhóm đơn vị tương đối gắn liền với kích thước của khung nhìn trình duyệt. Trong bảng 2 hiển thị danh sách chúng kèm theo mô tả.

Đơn vị tuyệt đối

Đơn vị tuyệt đối thể hiện kích thước vật lý- inch, cm, milimét, điểm, picas và pixel. Đối với các thiết bị có dpi thấp (số pixel trên inch xác định mật độ pixel), liên kết là trên mỗi pixel. Trong trường hợp này, một inch bằng 96 pixel. Rõ ràng, inch thật sẽ không khớp với inch trên thiết bị như vậy. Trên các thiết bị có độ phân giải cao, inch thực bằng inch trên màn hình nên kích thước pixel được tính là 1/96 inch. Trong bảng 3 liệt kê các đơn vị tuyệt đối cơ bản.

Ví dụ

tiêu đề 30px

Cỡ chữ 1,5 em

Tiêu đề 24 điểm

Dịch văn bản sang phải 30 mm

Ghi chú

Khi cài đặt kích thước, hãy đảm bảo chỉ định đơn vị đo, ví dụ: chiều rộng: 30px. Nếu không, trình duyệt sẽ không thể hiển thị kết quả mong muốn vì nó không hiểu kích thước bạn yêu cầu. Đơn vị không được thêm vào chỉ khi giá trị 0(lề: 0).

Internet Explorer hỗ trợ đơn vị vm thay vì vmin.

Sự chỉ rõ

Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.

• Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
• Đề xuất ứng viên ( Khuyến nghị có thể ) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được các mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
• Khuyến nghị đề xuất Khuyến nghị được đề xuất) - ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
• Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
• Bản thảo của người biên tập ( bản thảo biên tập) - phiên bản dự thảo của tiêu chuẩn sau khi các biên tập viên dự án thực hiện các thay đổi.
• Bản nháp ( Thông số kỹ thuật dự thảo) - phiên bản dự thảo đầu tiên của tiêu chuẩn.

×