Sự khác biệt giữa ptvà pxtrong CSS là gì? Tôi nên sử dụng cái nào và tại sao?

px Điểm ảnh

Tất cả những câu trả lời này dường như không chính xác. Trái với trực giác, trong CSS px không phải là pixel . Ít nhất, không phải trong ý nghĩa vật lý đơn giản.

Đọc bài viết này từ W3C , EM, PX, PT, CM, IN , về cách pxmột đơn vị "ma thuật" được phát minh cho CSS. Ý nghĩa của pxthay đổi bởi phần cứng và độ phân giải. (Bài viết đó mới, cập nhật lần cuối 2014-10.)

Cách nghĩ riêng của tôi về nó: 1 px is the size of a thin line intended by a designer to be barely visible.

Để trích dẫn bài báo đó :

Đơn vị px là đơn vị ma thuật của CSS. Nó không liên quan đến phông chữ hiện tại và cũng không liên quan đến các đơn vị tuyệt đối. Đơn vị px được xác định là nhỏ nhưng có thể nhìn thấy và sao cho đường kẻ ngang rộng 1px có thể được hiển thị với các cạnh sắc nét (không có khử răng cưa). Những gì sắc nét, nhỏ và có thể nhìn thấy tùy thuộc vào thiết bị và cách sử dụng: bạn có giữ nó gần mắt, như điện thoại di động, ở độ dài tay, như màn hình máy tính, hoặc một nơi nào đó ở giữa, như một cuốn sách không? Do đó, px không được định nghĩa là độ dài không đổi, mà là một cái gì đó phụ thuộc vào loại thiết bị và cách sử dụng thông thường của nó.

Để có được ý tưởng về sự xuất hiện của px, hãy tưởng tượng màn hình máy tính CRT từ những năm 1990: chấm nhỏ nhất nó có thể hiển thị các biện pháp khoảng 1/100 inch (0,25mm) hoặc hơn một chút. Đơn vị px có tên từ các pixel màn hình đó.

Ngày nay, có những thiết bị về nguyên tắc có thể hiển thị các chấm sắc nét nhỏ hơn (mặc dù bạn có thể cần kính lúp để nhìn thấy chúng). Nhưng các tài liệu từ thế kỷ trước sử dụng px trong CSS vẫn trông giống nhau, bất kể thiết bị là gì. Máy in, đặc biệt, có thể hiển thị các đường nét sắc nét với các chi tiết nhỏ hơn nhiều so với 1px, nhưng ngay cả trên máy in, một dòng 1px trông rất giống với màn hình máy tính. Các thiết bị thay đổi, nhưng px luôn có hình thức trực quan giống nhau.

Bài viết đó cung cấp một số hướng dẫn về việc sử dụng ptvs pxvs em, để trả lời Câu hỏi này.

Ở đây bạn đã có một lời giải thích rất chi tiết về sự khác biệt của họ

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Các ý chính của nó (từ nguồn)

Pixel là các đơn vị kích thước cố định được sử dụng trong phương tiện màn hình (nghĩa là được đọc trên màn hình máy tính). Pixel là viết tắt của "yếu tố hình ảnh" và như bạn biết, một pixel là một "hình vuông" nhỏ trên màn hình của bạn. Các điểm thường được sử dụng trong phương tiện in (bất cứ thứ gì được in trên giấy, v.v.). Một điểm bằng 1/72 inch. Các điểm rất giống với pixel, trong đó chúng là các đơn vị có kích thước cố định và không thể chia tỷ lệ kích thước.

Hãy xem bài viết tuyệt vời này tại CSS-Tricks:

• px - em -% - pt - từ khóa

Lấy từ bài báo:

pt

Đơn vị đo lường cuối cùng có thể khai báo kích thước phông chữ là giá trị điểm (pt). Giá trị điểm chỉ dành cho in CSS! Một điểm là một đơn vị đo lường được sử dụng cho kiểu chữ trên giấy thực tế. 72pts = một inch. Một inch = một inch giống như một người cai trị trong đời thực. Không phải là một inch trên màn hình, mà hoàn toàn tùy ý dựa trên độ phân giải.

Giống như cách các pixel có độ chính xác chết trên màn hình để định cỡ phông chữ, kích thước điểm là chính xác trên giấy. Để có kết quả đa trình duyệt và đa nền tảng tốt nhất trong khi in trang, hãy thiết lập biểu định kiểu in và kích thước tất cả các phông chữ với kích thước điểm.

Đối với biện pháp tốt, lý do chúng tôi không sử dụng kích thước điểm để hiển thị màn hình (ngoài lý do vô lý), là kết quả của nhiều trình duyệt khác nhau rất nhiều:

px

Nếu bạn cần kiểm soát chi tiết, kích thước phông chữ trong các giá trị pixel (px) là một lựa chọn tuyệt vời (đó là sở thích của tôi). Trên màn hình máy tính, nó không có độ chính xác cao hơn một pixel. Với kích thước phông chữ bằng pixel, bạn thực sự yêu cầu các trình duyệt hiển thị các chữ cái chính xác với số pixel đó theo chiều cao:

Windows, Mac, bí danh, chống răng cưa, trình duyệt chéo, không quan trọng, một phông chữ được đặt ở 14px sẽ cao 14px. Nhưng điều đó không có nghĩa là sẽ không có một số biến thể. Trong một thử nghiệm nhanh dưới đây, kết quả phù hợp hơn một chút so với từ khóa nhưng không giống nhau:

Do tính chất của các giá trị pixel, chúng không xếp tầng. Nếu một phần tử cha có kích thước pixel 18px và con là 16px, con sẽ là 16px. Tuy nhiên, cài đặt kích thước phông chữ có thể được sử dụng kết hợp. Ví dụ: nếu cha mẹ được đặt thành 16px và đứa trẻ được đặt thành lớn hơn, thì đứa trẻ thực sự sẽ lớn hơn cha mẹ. Một bài kiểm tra nhanh cho tôi thấy điều này:

"Lớn hơn" đã tăng 16px của cha mẹ thành 20px, tăng 25%.

Pixels đã nhận được một bọc xấu trong quá khứ cho mối quan tâm khả năng tiếp cận và khả năng sử dụng. Trong IE 6 trở xuống, người dùng có thể thay đổi kích thước phông chữ được đặt thành pixel . Điều đó có nghĩa là các nhà thiết kế trẻ khỏe mạnh của chúng ta có thể đặt loại 12px và đọc nó trên màn hình tốt, nhưng khi những người lâu hơn một chút trong răng sẽ tăng kích thước để họ có thể đọc nó, họ không thể đọc được. Đây thực sự là lỗi của IE 6, không phải của chúng tôi, nhưng chúng tôi ghi lại những gì chúng tôi đã làm và chúng tôi phải đối phó với nó.

Đặt kích thước phông chữ bằng pixel là phương pháp chính xác nhất (và tôi thấy hài lòng nhất), nhưng hãy xem xét số lượng khách truy cập vẫn sử dụng IE 6 trên trang web của bạn và nhu cầu truy cập của họ. Chúng tôi đang đứng trên bờ vực chảy máu của việc không cần phải quan tâm đến điều này nữa.

Pt là 1/72 inch và là thước đo vô dụng cho mọi thứ được hiển thị trên thiết bị không tính toán DPI chính xác. Điều này làm cho nó trở thành một lựa chọn hợp lý để in và một lựa chọn khủng khiếp để sử dụng trên màn hình.

Px là một pixel, nó sẽ ánh xạ tới pixel màn hình trong hầu hết các trường hợp.

CSS cung cấp một loạt các đơn vị khác và đơn vị nào bạn nên chọn tùy thuộc vào kích thước bạn đang đặt.

Một pixel là tuyệt vời nếu bạn cần kích thước một cái gì đó để phù hợp với một hình ảnh, hoặc nếu bạn muốn có một viền mỏng.

Tỷ lệ phần trăm rất phù hợp với kích thước phông chữ, nếu bạn sử dụng chúng một cách nhất quán, bạn sẽ có được kích thước phông chữ tỷ lệ thuận với sở thích của người dùng.

Ems thật tuyệt khi bạn muốn một phần tử tự kích thước dựa trên kích thước phông chữ (vì vậy một đoạn văn có thể rộng hơn nếu kích thước phông chữ lớn hơn)

… và như thế.

pt là một dẫn xuất (viết tắt) của "điểm" trong lịch sử được sử dụng trong các mặt kiểu in trong đó kích thước thường được "đo" theo "điểm" trong đó 1 điểm có số đo xấp xỉ 1/72 inch, và do đó 72 phông chữ sẽ có kích thước 1 inch.

px là tên viết tắt của "pixel", là một "dấu chấm" đơn giản trên màn hình hoặc máy in ma trận điểm hoặc máy in hoặc thiết bị khác hiển thị theo kiểu chấm - trái ngược với máy đánh chữ cũ có kích thước cố định, tiền đạo rắn để lại một dấu ấn của nhân vật bằng cách nhấn vào một dải ruy băng, do đó để lại một hình ảnh có kích thước cố định.

Liên quan chặt chẽ đến điểm là các thuật ngữ "chữ hoa" và "chữ thường" trong lịch sử phải làm với việc lựa chọn các ký tự đánh máy cố định trong đó các ký tự "bị giam cầm" được đặt trong một hộp (trường hợp) phía trên các ký tự không bị giam giữ trong một hộp bên dưới, và do đó, trường hợp "thấp hơn".

Có các hộp (trường hợp) khác nhau cho các phông chữ và kích thước đánh máy khác nhau, nhưng trường hợp vẫn và "trên" và "dưới" cho mỗi trường hợp.

Một thuật ngữ khác là "pica" là số đo của một ký tự trong phông chữ, do đó, pica là 1/6 đơn vị đo hoặc 12 điểm (12/72) đơn vị đo.

Nói một cách khéo léo, phép đo là trên các máy tính 4.233mm hoặc 0.166in trong khi điểm cũ (của Mỹ) là 1 / 72,27 inch và tiếng Pháp là 4,512mm (0,177in.). Do đó, tuyên bố của tôi về "gần đúng" liên quan đến các phép đo.

Hơn nữa, máy chữ như được sử dụng trong văn phòng, có kích thước "Elite" hoặc "Pica" trong đó kích thước là 10 và 12 ký tự trên mỗi inch một cách chính xác.

Ngoài ra, "điểm", trước khi tiêu chuẩn hóa được dựa trên kích thước "chân" của máy đánh chữ kim loại, kích thước dấu chân cơ bản của một ký tự và có kích thước khác nhau.

Lưu ý rằng một "chân" đánh máy ban đầu là từ chân máy in đã chết. Một bàn chân typographic chứa 72 picas hoặc 864 điểm.

Đối với việc sử dụng CSS, tôi thích sử dụng EM hơn là px hoặc pt, do đó đạt được lợi thế về tỷ lệ mà không mất vị trí và kích thước tương đối.

EDIT: Để hoàn chỉnh, bạn có thể nghĩ EM (em) là một yếu tố đo chiều cao của một phông chữ, do đó, 1em cho phông chữ 12pt sẽ là chiều cao của phông chữ đó và 2em sẽ cao gấp đôi chiều cao đó. Lưu ý rằng đối với phông chữ 12px, 2em là 24 pixel. SO 10px thường là 0,63em của một phông chữ chuẩn là "hầu hết" các trình duyệt dựa trên 16px = 1em làm cỡ chữ tiêu chuẩn.