Chuyển em sang px Em ↔ Pixels Miễn phí Trực tuyến An toàn

Vì sao bạn chuyển em sang px

Một bảng định kiểu ghi margin-bottom: 0.75em cho một tiêu đề, và padding: 0.4em 0.9em cho một nút bấm, và line-height 1.3em cho một khối chữ. Đó là những giá trị tốt, linh hoạt, và gần như không thể hình dung. Lề đó là bao nhiêu pixel? Phần đệm của nút có khớp với 6 px và 14 px trong tệp thiết kế không? Để biết, bạn chuyển em sang px: bạn nhân với cỡ chữ mà em tham chiếu, và đọc đáp án trong đơn vị mà các công cụ thiết kế dùng. Đó là câu hỏi các lập trình viên đặt ra khi xem lại mã, kiểm tra một bản dựng so với bản mẫu, gỡ lỗi khoảng cách hoặc bàn giao một thành phần đã hoàn chỉnh cho người nghĩ bằng pixel.

Em là đơn vị khó chuyển đổi nhất trong CSS, vì nó không có giá trị cố định. Một em là cỡ chữ đang có hiệu lực ở nơi giá trị được dùng, hay, với chính thuộc tính font-size, là của phần tử cha. Vì vậy 1,5 em có thể là 24 px ở một chỗ và 36 px ở chỗ khác, trong cùng một bảng định kiểu, từ cùng một quy tắc. Do đó bộ chuyển đổi không đoán. Nó hỏi cỡ chữ mà em tham chiếu, hiển thị nó cạnh đáp án và tính với nó. Nếu bạn không biết cỡ đó, các phần dưới đây giải thích cách tìm nó trong trình duyệt của bạn.

Phép tính diễn ra trong trình duyệt của bạn và không có gì được tải lên. Bên dưới bạn sẽ thấy công thức, cách tìm cơ sở đúng, phép chuyển đổi giữ được gì và không giữ được gì, cách các giá trị em lồng nhau nhân lên, khi nào lập trình viên cần chuyển em sang px, và vài thói quen giúp một bảng định kiểu dùng em dễ hiểu.

Công thức và cơ sở

px bằng em nhân với cỡ chữ

Công thức là một phép nhân: px = em × cơ sở. Với cơ sở 16 px, 1,5 em thành 24 px, 0,75 em thành 12 px và 2 em thành 32 px. Trang in cơ sở cạnh kết quả, nên một dòng như 1,5 em = 24 px (16 px) nói chính xác điều đã giả định. Nếu cỡ chữ của phần tử là 20 px, hãy gõ 20, và 1,5 em thành 30 px.

Tìm cơ sở trong trình duyệt của bạn

Hãy mở công cụ nhà phát triển, chọn phần tử và nhìn cỡ chữ đã tính của nó. Đó là con số để gõ vào ô cơ sở cho bất kỳ thuộc tính nào khác font-size. Với chính font-size, hãy chọn phần tử cha và đọc cỡ đã tính của nó. Mất vài giây và loại bỏ hoàn toàn việc đoán mò.

Khi bạn không thấy trang

Nếu bạn đang đọc mã mà không có trang, hãy theo chuỗi cỡ chữ đi lên từ phần tử: font-size riêng của nó nếu có, nếu không thì của phần tử cha, và cứ thế đến gốc, là 16 px trừ khi bảng định kiểu hay người đọc đã đổi. Khi một cỡ được cho bằng em, hãy nhân dọc theo chuỗi. Việc này tẻ nhạt, đó là lý do hầu hết các nhóm chọn rem cho cỡ chữ.

Phép chuyển đổi giữ gì và không giữ được gì

Nó giữ tỷ lệ so với chữ

Kết quả là cỡ pixel mà em đại diện ở cơ sở bạn đã gõ. Viết bằng em, một khoảng cách hay một cỡ đi theo chữ mà nó thuộc về, và phép chuyển đổi cho thấy nó thành bao nhiêu với một cỡ chữ cụ thể.

Nó không thể cho một đáp án cho cả trang

Đây là điều cần cẩn thận: em tương đối so với cỡ chữ của chính phần tử, hay, với font-size, của phần tử cha, không phải của gốc. Vì vậy cùng 1,5 em là 24 px bên trong một phần tử 16 px và 36 px bên trong một phần tử 24 px, và em bên trong em nhân lên. Con số trên trang đúng với cơ sở trong ô và không với gì khác. Nếu bạn muốn một con số đúng ở mọi nơi, đó là việc của rem. Để so sánh hai đơn vị, hãy chuyển rem sang px và xem một đơn vị tương đối so với gốc giữ cố định thế nào.

Làm tròn

Nhân với một cơ sở là số nguyên cho kết quả chính xác với hầu hết giá trị. Nếu cơ sở là số thập phân, ví dụ 13,5 px, một giá trị như 1,2 em cho 16,2 px. Trình duyệt xử lý pixel lẻ, nhưng khi bạn cần pixel nguyên, cho một đường viền mảnh hay một biểu tượng trên lưới, hãy làm tròn có chủ ý và kiểm tra nó trông ra sao.

Cách các giá trị em lồng nhau nhân lên

Một danh sách trong một danh sách

Hãy lấy một trang có chữ nội dung 16 px. Một danh sách có font-size: 0.875em, là 14 px. Các mục bên trong nó cũng có font-size: 0.875em, là 14 × 0,875 = 12,25 px. Một danh sách trong một mục lại làm thế lần nữa: 10,7 px. Sâu ba tầng là chữ đã tí hon, và không ai quyết định như vậy. Khi bạn chuyển em sang px cho một thành phần và đáp án trông quá nhỏ, lồng nhau là điều đầu tiên cần kiểm tra.

Đi ngược lên chuỗi

Để biết cỡ pixel thật của em lồng nhau, hãy nhân cơ sở với từng giá trị trên đường đi xuống: 16 × 0,875 × 0,875 = 12,25. Bộ chuyển đổi làm từng bước một. Với một chuỗi, hãy chuyển giá trị đầu, dùng đáp án làm cơ sở cho giá trị thứ hai và tiếp tục. Đó là cùng phép tính mà trình duyệt thực hiện.

Cách ngăn nó chồng chất

Hãy dùng rem cho cỡ chữ, để mọi cỡ đều tham chiếu đến gốc, và giữ em cho khoảng cách, để phần đệm và lề đi theo chữ của chính phần tử. Trong sự kết hợp đó, không có gì chồng chất, và các giá trị em bạn chuyển luôn tương đối so với một cỡ chữ bạn đọc được ngay.

Các giá trị thông dụng

Bảng ở cuối trang

Trang có một bảng các giá trị pixel mà các con số em thông dụng tương ứng với ở cơ sở bạn đặt: 0,5 em là 8 px, 0,625 là 10, 0,75 là 12, 0,875 là 14, 1 là 16, 1,125 là 18, 1,25 là 20, 1,5 là 24, 2 là 32, 3 là 48 và 4 là 64. Ở cơ sở mặc định đây là những con số giống như với rem. Đổi cơ sở và bảng đổi theo, đó là cách hay để thấy em thật sự làm gì.

Thử hai cơ sở cạnh nhau

Hãy gõ 1,5 với cơ sở 14, rồi với cơ sở 20. Bạn được 21 và 30 pixel. Đó là toàn bộ khác biệt giữa em và rem trong một thí nghiệm: cùng một con số, hai phần tử, hai cỡ.

Cách chuyển em sang px ở đây

Gõ giá trị em

Hãy nhập cỡ bằng em vào ô đầu. Số thập phân được chấp nhận, nên 0,714 chạy được cũng như 1.

Đặt cỡ chữ mà em tham chiếu

Hãy gõ cỡ chữ của phần tử, hay của phần tử cha nếu thuộc tính là font-size. Nếu bạn không chắc, hãy để 16 và coi kết quả là xấp xỉ.

Đọc giá trị pixel

Đáp án hiện ngay, với cơ sở hiển thị bên cạnh. Hãy chép nó vào ghi chú hoặc so với tệp thiết kế.

Các đơn vị này đến từ đâu

Em

Em có trước web. Trong chữ chì nó là bề rộng của một khối đúc, đặt theo chữ M hoa, và các nhà in vẫn nói về gạch em và khoảng trắng em. Trong CSS nó nghĩa là cỡ chữ đang có hiệu lực, đó là lý do nó đổi khi bạn lồng các phần tử.

Pixel và rem

Khi màn hình thôi có mật độ dự đoán được, một trang đo bằng pixel thật trở thành trang co lại khi màn hình sắc nét hơn. Vì vậy pixel CSS được định nghĩa lại là một độ dài tham chiếu: xấp xỉ 1/96 inch khi nhìn ở khoảng cách đọc thoải mái. Rem được thêm vào để thoát khỏi sự chồng chất của em: nó là em của phần tử gốc và không bao giờ nhân lên. Nếu bạn làm việc với cả hai, hãy chuyển px sang em để đi chiều ngược lại.

Khi lập trình viên chuyển em sang px

Kiểm tra một bản dựng so với tệp thiết kế

Một nhà thiết kế trao một tệp bằng pixel, và mã thì bằng em. Để kiểm tra trang có khớp không, bạn chuyển em sang px bằng cỡ chữ của từng thành phần. Một nút với nhãn 14 px và phần đệm 0.714em 1.429em nên ra 10 px và 20 px, và nếu thiết kế ghi 12 và 24, một trong hai là sai.

Gỡ lỗi khoảng cách

Khi một khoảng trống trông quá lớn hay quá nhỏ, nguyên nhân thường là một giá trị em tham chiếu đến cỡ chữ lớn hơn hoặc nhỏ hơn bạn mong đợi. Chuyển nó bằng cỡ chữ đã tính của phần tử cho bạn biết ngay phép toán có phải vấn đề không.

Đọc mã lạ

Các bảng định kiểu thừa kế đầy những giá trị em mà bạn phải dựng lại cỡ pixel. Chuyển một nhúm cái chính, với các cơ sở đúng, cho bạn một bản đồ của thiết kế.

Viết tài liệu và kiểm thử

Người kiểm thử một trang mô tả điều họ thấy bằng pixel. Một lập trình viên nói phần đệm là 0.9em ít có nghĩa với người kiểm thử; 12,6 px thì có nghĩa. Chuyển đổi giúp hai bên hiểu nhau.

Những cái bẫy khi bạn chuyển em sang px

Dùng sai cơ sở

Lỗi phổ biến nhất. Với font-size, hãy dùng cỡ của phần tử cha; với mọi thuộc tính khác, cỡ của chính phần tử. Hãy kiểm tra thuộc tính trước khi gõ cơ sở.

Quên một phần tử cha tính bằng em

Nếu cỡ của phần tử cha tự nó bằng em, bạn phải theo chuỗi. Hãy dùng giá trị đã tính từ công cụ nhà phát triển để đi tắt.

Cho rằng màn hình hiển thị cùng pixel

Một pixel CSS không phải một pixel thiết bị. Trên màn hình mật độ cao, một pixel CSS có thể là hai hoặc ba pixel thiết bị. Phép chuyển đổi cho pixel CSS, đơn vị mà công cụ thiết kế và bảng định kiểu cùng dùng.

Coi đáp án là một lời hứa

Nếu người đọc phóng to chữ hoặc thành phần được dùng lại với cỡ chữ khác, các pixel thay đổi, như chúng vốn phải thế. Con số đã chuyển mô tả một tình huống, không phải tất cả.

Những câu hỏi người ta hỏi trước khi chuyển đổi

1 em là bao nhiêu pixel?

Bằng cỡ chữ đang có hiệu lực: 16 px cho chữ nội dung thường ở mặc định, 24 px bên trong một phần tử 24 px.

2 em là bao nhiêu pixel?

Gấp đôi cỡ chữ đang có hiệu lực. Ở 16 px đó là 32 px.

Vì sao trình duyệt của tôi hiển thị khác?

Cỡ chữ thật của phần tử khác với cơ sở bạn đã gõ. Hãy đọc cỡ chữ đã tính trong công cụ nhà phát triển.

Em có giống rem không?

Không. Em tương đối so với phần tử, rem so với gốc.

Con số của tôi có được tải lên không?

Không. Phép toán chạy trong trình duyệt của bạn và không có gì được gửi đi đâu.

Làm sao để quay lại?

Bằng px sang em, chia thay vì nhân.

Thói quen giúp bảng định kiểu dùng em dễ hiểu

Chú thích cơ sở

Một dòng như padding: 0.75em 1.25em; /* 12px 20px at 16px */ tốn vài ký tự và tiết kiệm cho người đọc sau một phép chuyển đổi. Nó ghi lại cơ sở bạn đã giả định.

Đặt cỡ chữ một lần cho mỗi thành phần

Hãy định nghĩa cỡ chữ của thành phần trên phần tử gốc của nó, và tham chiếu đến nó bằng em bên trong. Cơ sở khi đó giống nhau cho mọi giá trị trong thành phần, và bạn có thể chuyển em sang px theo nó một cách tự tin.

Giữ em cho khoảng cách, rem cho chữ

Đó là cách chia mà hầu hết bảng định kiểu chọn, và nó giữ phép toán đơn giản. Với các cỡ tương đối so với màn hình, px sang vw và vw sang px là những công cụ.

Kiểm thử ở cỡ chữ khác

Hãy tăng cỡ chữ mặc định trong trình duyệt của bạn và nhìn trang. Nếu khoảng cách đi theo chữ, các giá trị em đang hoạt động. Nếu không, có gì đó bị bỏ lại trong pixel.

Một phương pháp cho các trường hợp khó chịu

Làm từ ngoài vào trong

Khi một thành phần nằm sâu bên trong những cái khác và các giá trị em của nó trông rối, hãy bắt đầu ở phần tử ngoài cùng mà bạn biết cỡ và làm vào trong, chuyển từng tầng một. Hãy ghi mỗi cỡ pixel vào ghi chú khi đi. Sau hai hoặc ba tầng cả chuỗi đã nằm trên giấy, và bạn thấy chính xác con số bất ngờ đến từ đâu. Mất một phút và thay cho một giờ đoán mò.

Quyết định có đơn giản hóa không

Nếu bạn phải chuyển em sang px qua bốn tầng để hiểu một bố cục, bảng định kiểu đang nói với bạn điều gì đó. Hãy cân nhắc chuyển các cỡ chữ sang rem, để mỗi cái tham chiếu đến gốc, và chỉ để lại khoảng cách trong em. Trang sẽ trông như cũ và dễ đọc hơn nhiều vào năm sau.

Các bộ chuyển đổi liên quan

Cùng họ công cụ bao gồm các phép chuyển đổi lân cận. Để quay lại em, hãy dùng px sang em. Với các cỡ tương đối so với gốc, có px sang rem và rem sang px, và với các cỡ tương đối so với màn hình, px sang vw và vw sang px. Với màu sắc của cùng bảng định kiểu, HEX sang RGB và RGB sang HEX lo các ký hiệu.

Một ví dụ có lời giải

Giả sử bạn đang xem lại một thành phần nút bấm. Nhãn là 14 px, CSS ghi padding: 0.714em 1.429em và một khoảng 0.5em giữa biểu tượng và nhãn. Bạn gõ 14 làm cơ sở, rồi 0,714 và đọc 10 px, 1,429 và đọc 20 px, 0,5 và đọc 7 px. Tệp thiết kế ghi 10, 20 và 8. Hai trong ba khớp, nên bạn nhìn khoảng đó: 8 px ở cơ sở 14 sẽ là 0,571 em, và ai đó đã làm tròn thành 0,5. Bạn nêu nó trong buổi xem xét, và cách sửa là một con số.

Một danh mục kiểm tra ngắn

Trước khi chuyển đổi

Hãy tìm cỡ chữ mà em tham chiếu, từ công cụ nhà phát triển hoặc từ chuỗi cỡ chữ trong mã.

Trong khi chuyển đổi

Hãy gõ giá trị em, đặt cơ sở và đọc pixel, ghi chú cơ sở hiển thị cạnh kết quả.

Sau khi chuyển đổi

Hãy so với tệp thiết kế. Nếu các con số khác nhau, hãy kiểm tra cơ sở trước khi nghi ngờ mã.

Những lỗi thường gặp

Dùng 16 mà không kiểm tra

Nó chỉ đúng khi cỡ chữ của phần tử là 16 px.

Lẫn em với rem

Chúng trông giống nhau và cư xử khác nhau. Hãy dùng đúng trang cho từng cái.

Quên rằng em chồng chất

Một giá trị bên trong một phần tử lồng nhau tương đối so với một cỡ bạn có thể chưa thấy. Hãy theo chuỗi.

Con số của bạn ở lại trên thiết bị của bạn

Phép tính diễn ra tại chỗ. Các giá trị của bạn được dùng bởi chính trình duyệt của bạn và không có gì được gửi đi đâu. Không có gì để xóa sau đó và không có tài khoản để tạo. Đó là cách giản dị để chuyển em sang px.

Tóm tắt

Để chuyển em sang px ở đây, hãy gõ cỡ bằng em và cỡ chữ mà nó tham chiếu, và đọc kết quả bằng pixel ngay, dùng công thức px = em × cơ sở. Phép chuyển đổi giữ tỷ lệ tương đối so với cỡ chữ đang có hiệu lực ở nơi giá trị được dùng. Nó không thể cho một đáp án duy nhất cho một trang: em tương đối so với chính phần tử, hay với phần tử cha cho font-size, nên cùng 1,5 em là 24 px bên trong một phần tử 16 px và 36 px bên trong một phần tử 24 px, và em bên trong em nhân lên. Với một con số đúng ở mọi nơi, hãy dùng rem. Không có gì được tải lên.