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

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

Em là đơn vị tương đối lâu đời nhất trong CSS và là đơn vị gây ra nhiều tranh cãi nhất. Bạn có một cỡ bằng pixel từ tệp thiết kế, 20 px phần đệm trên một nút bấm, 14 px khoảng trống cạnh một biểu tượng, 36 px cho một tiêu đề, và bạn muốn nó bằng em, để nó đi theo chữ mà nó thuộc về. Khi bạn chuyển px sang em, bạn đang đặt một câu hỏi cụ thể: đây là bội số nào của cỡ chữ hiện tại? Đáp án phụ thuộc vào một con số mà trang không thể đoán, cỡ chữ đang có hiệu lực ở nơi giá trị được dùng, nên bộ chuyển đổi đặt con số đó vào một ô và dùng nó một cách công khai.

Lý do viết cỡ bằng em là những thứ thuộc về chữ nên lớn lên cùng chữ. Phần đệm bên trong một nút bấm nên lớn hơn khi nhãn của nút lớn hơn. Khoảng cách giữa một biểu tượng và chú thích của nó nên giãn ra khi chú thích giãn. Lề dưới của một tiêu đề nên giữ tỷ lệ với tiêu đề. Trong tất cả các trường hợp này giá trị pixel sai ngay khi cỡ chữ đổi, còn giá trị em đúng ở mọi cỡ. Đó là toàn bộ lý lẽ cho em, và là một lý lẽ mạnh.

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, lý do em cần cẩn thận hơn rem, cái bẫy lồng nhau tạo ra những cỡ bất ngờ, những nơi em là đơn vị đúng, và một phương pháp chọn giữa em và rem trong một bảng định kiểu thực.

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

em bằng px chia cho cỡ chữ

Công thức là một phép chia: em = px ÷ cơ sở. Với cơ sở 16 px, giá trị 24 px thành 1,5 em, 8 px thành 0,5 em và 20 px thành 1,25 em. Trang hiện cơ sở cạnh kết quả, như trong 24 px = 1,5 em (16 px), để bạn thấy điều gì đã được giả định. Phép toán giống như với rem. Ý nghĩa thì khác.

Cơ sở là gì

Với rem, cơ sở là cỡ chữ của phần tử gốc. Với em, nó là cỡ chữ của phần tử nơi giá trị được dùng, hay, với chính thuộc tính font-size, của phần tử cha. Đó là lý do em không có một đáp án duy nhất: cùng một giá trị trong bảng định kiểu nghĩa là các cỡ pixel khác nhau ở những nơi khác nhau. Nếu bạn đang chuyển phần đệm cho một nút có chữ 14 px, hãy gõ 14 làm cơ sở. Nếu bạn đang chuyển lề cho một tiêu đề 32 px, hãy gõ 32.

Mặc định khi bạn không biết

Nếu bạn chỉ muốn một con số sơ bộ, hãy để cơ sở là 16, cỡ của chữ thường trong một trình duyệt chưa ai thay đổi. Kết quả đúng cho một khối chữ nội dung bình thường, và nó cho bạn cảm nhận về tỷ lệ ngay cả khi phần tử hóa ra có cỡ khác.

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à tỷ lệ so với cỡ chữ đang có hiệu lực ở nơi giá trị được dùng. Viết bằng em, một khoảng cách lớn lên và nhỏ đi cùng chữ bên cạnh, và đó chính xác là cách khoảng cách quanh các từ nên cư xử.

Nó không thể cho một con số 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 không có một đáp án duy nhất cho một trang: 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, hãy chuyển px sang rem và xem cùng một giá trị pixel cư xử thế nào.

Làm tròn

Chia cho 16 cho giá trị gọn với nhiều cỡ và số thập phân tuần hoàn với các cỡ khác. Một giá trị như 0,8125 em ổn trong một bảng định kiểu, nhưng bạn có thể thích làm tròn thành 0,8 hoặc 0,85 nếu cỡ chính xác không quan trọng. Hãy giữ nguyên con số đầy đủ ở nơi độ chính xác có ý nghĩa.

Cái bẫy lồng nhau

Em chồng chất thế nào

Giả sử một danh sách có font-size: 0.875em và các mục của nó cũng có font-size: 0.875em. Danh sách bằng 87,5% của phần tử cha. Mỗi mục bằng 87,5% của danh sách, tức khoảng 76,6% của phần tử cha. Một danh sách lồng bên trong một mục lại co xuống, còn khoảng 67%. Sau ba tầng chữ đã rất nhỏ, và không ai cố ý viết như vậy. Đó là điều người ta muốn nói khi bảo rằng em chồng chất.

Vì sao điều đó quan trọng khi bạn chuyển px sang em

Nếu bạn chuyển một giá trị pixel sang em cho font-size, cơ sở bạn phải dùng là cỡ chữ của phần tử cha, không phải của chính phần tử. Nhiều sai lầm đến từ việc dùng nhầm cái. Với các thuộc tính khác, như padding và margin, cơ sở là cỡ chữ của chính phần tử. Quy tắc dễ nói và dễ quên: font-size nhìn lên, mọi thứ khác nhìn vào chính nó.

Cách tránh bất ngờ

Hãy dùng em cho khoảng cách đi theo chữ, và rem cho cỡ chữ. Như vậy cỡ chữ không bao giờ chồng chất, vì chúng tham chiếu đến gốc, và khoảng cách vẫn đi theo chữ của chính nó. Đó là sự kết hợp mà hầu hết bảng định kiểu hiện đại chọn.

Các cỡ thông dụng

Bảng ở cuối trang

Dưới bộ chuyển đổi là một bảng các cỡ thông dụng ở cơ sở bạn đặt: 8 px là 0,5 em, 10 px là 0,625, 12 px là 0,75, 14 px là 0,875, 16 px là 1, 18 px là 1,125, 20 px là 1,25, 24 px là 1,5, 32 px là 2, 48 px là 3 và 64 px là 4. Ở cơ sở 16, đây là những con số giống như với rem, đó là lý do người ta lẫn hai thứ. Sự khác biệt nằm ở điều mà 16 đại diện.

Đổi cơ sở cho khớp với phần tử

Nếu bạn đặt cơ sở là 14 cho một nút nhỏ, bảng đổi: 14 px giờ là 1 em, 7 px là 0,5 em và 21 px là 1,5 em. Hãy thử, và bạn sẽ thấy một phần đệm 1,5 em có cỡ pixel khác trong một nút 14 px so với trong một nút 18 px thế nào, và vì sao điều đó hữu ích.

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

Gõ giá trị pixel

Hãy nhập cỡ bằng pixel vào ô đầu. Số thập phân được chấp nhận.

Đặ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 bạn đang chuyển một font-size. Nếu bạn không chắc, hãy để 16 và coi kết quả là xấp xỉ.

Chép giá trị em

Hãy dùng con số trong CSS của bạn kèm đơn vị, như trong padding: 1.25em. Một con số không có đơn vị không hợp lệ với hầu hết các thuộc tính.

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

Em trong chữ chì

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à là đơn vị tự nhiên của khoảng trống ngang trên dòng in. Các nhà in vẫn nói về gạch em và khoảng trắng em. Trong CSS ý tưởng đó còn lại ở dạng lỏng hơn: một em là cỡ của phông chữ hiện tại.

Pixel và rem

Pixel CSS 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, không phải một chấm trên màn hình của bạn. Rem được thêm vào để cho lập trình viên một đơn vị tương đối nhưng không bao giờ chồng chất: nó là em của phần tử gốc. Giữa chúng, pixel, em và rem đáp ứng ba nhu cầu: cỡ cố định, cỡ tương đối so với chữ và cỡ tương đối so với trang.

Nơi em là lựa chọn đúng

Phần đệm bên trong nút và ô biểu mẫu

Một nút với padding: 0.5em 1em trông cùng tỷ lệ ở mọi cỡ chữ. Làm nhãn lớn hơn và cả nút lớn lên theo, đó là điều bạn muốn từ một thành phần có thể được dùng trong thanh công cụ và trong một biểu ngữ lớn.

Khoảng cách cạnh biểu tượng

Một biểu tượng theo sau bởi một chú thích cần khoảng cách co giãn theo chú thích. Lề 0.4em làm được điều đó; lề 6px thì không.

Lề quanh tiêu đề và đoạn văn

Nhịp dọc trong một tài liệu dễ giữ hơn khi khoảng cách giữa các đoạn tính bằng em, vì nó đi theo cỡ của đoạn. Lề của một tiêu đề tính bằng em giữ tỷ lệ khi tiêu đề đổi cỡ ở các điểm ngắt khác nhau.

Truy vấn phương tiện

Các điểm ngắt viết bằng em đáp ứng cỡ chữ của người đọc, nên bố cục chuyển sang dạng hẹp sớm hơn với người đã phóng to chữ. Trong truy vấn phương tiện, em tham chiếu đến mặc định của trình duyệt chứ không phải phần tử nào, nên nó không chồng chất.

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

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 thứ khác, cỡ của chính phần tử. Hãy kiểm tra thuộc tính bạn đang chuyển trước khi gõ cơ sở.

Quên rằng phần tử cha cũng có thể tính bằng em

Nếu cỡ chữ của phần tử cha tự nó bằng em, bạn phải theo chuỗi lên trên để biết cỡ thật. Khi một bảng định kiểu trở nên phức tạp, hãy chuyển các cỡ chữ sang rem và giữ em cho khoảng cách.

Mong có một con số cho cả thành phần

Một thành phần chứa chữ có các cỡ khác nhau không có một giá trị em duy nhất cho các phần của nó. Hãy chuyển từng phần theo cơ sở của chính nó.

Trộn em và rem cho cùng một thuộc tính

Một phần đệm 1rem cạnh một lề 1em là hợp lệ và thường gây rối. Hãy chọn một quy tắc, như rem cho cỡ chữ và em cho khoảng cách, và giữ nó.

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

16 px là bao nhiêu em?

Một, nếu cỡ chữ đang có hiệu lực là 16 px. Nếu cỡ chữ của phần tử là 20 px, thì 16 px là 0,8 em.

Em có tốt hơn rem không?

Không cái nào tốt hơn. Rem tốt hơn cho cỡ chữ và bố cục chung. Em tốt hơn cho khoảng cách nên đi theo chữ của chính nó.

Vì sao phần đệm của tôi lớn hơn mong đợi?

Vì nó tương đối so với cỡ chữ của phần tử, có thể lớn hơn bạn nghĩ. Hãy kiểm tra cỡ chữ đã tính trong công cụ nhà phát triển của trình duyệt.

Tôi có thể dùng số thập phân không?

Có. Các giá trị như 0,625em và 1,333em là bình thường.

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 em sang px, nhân thay vì chia.

Chọn khôn ngoan khi bạn chuyển px sang em

Quyết định giá trị thuộc về cái gì

Nếu nó thuộc về chữ, em là đúng. Nếu nó thuộc về trang, như bề rộng cột hay khoảng cách giữa các phần, rem hoặc đơn vị khung nhìn hợp hơn. px sang vw biểu diễn một cỡ như một phần của bề rộng màn hình.

Viết ý định trong một chú thích

Một dòng như padding: 0.75em 1.25em; /* 12px 20px at 16px */ làm lý lẽ hiện rõ. Khi cỡ chữ đổi về sau, bạn sẽ biết các con số được định là gì.

Giữ cỡ chữ của thành phần ở một nơi

Hãy đặt cỡ chữ trên phần tử gốc của thành phần và để mọi thứ bên trong tham chiếu đến nó. Khi đó các giá trị em bên trong có cùng ý nghĩa ở mọi nơi trong thành phần, và bạn có thể chuyển px sang em theo một cơ sở duy nhất.

Thói quen tốt khi bạn chuyển px sang em

Chuyển px sang em từng thành phần một

Đừng cố chuyển px sang em cho cả bảng định kiểu một lượt. Hãy lấy một thành phần, như một thẻ hay một nút, quyết định cỡ chữ của nó và chuyển từng giá trị khoảng cách của nó theo cỡ đó. Khi thành phần xong, hãy thử nó ở hai hoặc ba cỡ chữ. Rồi sang cái tiếp theo.

Dùng máy tính cho các giá trị lẻ, không phải giá trị tròn

Các giá trị như 8, 16 và 24 pixel chuyển thành số em gọn ở cơ sở 16. Các giá trị lẻ như 22 hay 13 cho số thập phân dài. Khi bạn chuyển px sang em cho những giá trị này, hãy quyết định xem thiết kế có thật sự cần con số chính xác không hay giá trị em tròn gần nhất cũng tốt như vậy. Nhà thiết kế thường vui lòng làm tròn, và một bảng định kiểu gọn gàng dễ bảo trì hơn.

Ghi lại cơ sở

Một chú thích ngắn cạnh mỗi giá trị em, nói cơ sở là gì, giúp người kế tiếp. Nếu sau này ai đó đổi cỡ chữ của thành phần, họ sẽ biết rằng khoảng cách đi theo nó là có chủ ý chứ không phải tình cờ. Viết điều đó ra một lần đáng với thời gian nó tốn.

So với giá trị rem tương đương

Nếu bạn không chắc em hay rem hợp với một giá trị, hãy chuyển px sang em và sang rem rồi hỏi điều gì nên xảy ra khi cỡ chữ đổi. Nếu giá trị nên đi theo chữ của chính phần tử, hãy chọn em. Nếu nó nên đi theo trang, hãy chọn rem.

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 pixel, hãy dùng em sang px. 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à HEX sang HSL lo các ký hiệu.

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

Giả sử nhãn của một nút là 14 px và thiết kế cho nút 10 px phần đệm dọc và 20 px phần đệm ngang. Bạn gõ 14 làm cơ sở, 10 và đọc 0,714 em, gõ 20 và đọc 1,429 em. Trong bảng định kiểu bạn viết padding: 0.714em 1.429em. Khi cùng nút đó được dùng trong một biểu ngữ lớn với nhãn 18 px, phần đệm thành 12,9 px và 25,7 px, đúng tỷ lệ. Nếu bạn viết 10px và 20px, nút sẽ trông mỏng quanh chữ lớn hơn.

Một danh sách kiểm tra ngắn

Trước khi chuyển đổi

Hãy quyết định giá trị thuộc về thuộc tính nào, và tìm cỡ chữ mà nó nên tương đối với.

Trong khi chuyển đổi

Hãy gõ giá trị pixel và cơ sở đúng, và chép con số em kèm đơn vị.

Sau khi chuyển đổi

Hãy đổi cỡ chữ của thành phần trong trình duyệt và kiểm tra khoảng cách có đi theo không. Hãy tìm các giá trị em lồng nhau chồng chất.

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

Dùng cỡ gốc làm cơ sở cho phần đệm

Đó là việc của rem. Em tham chiếu đến cỡ chữ của chính phần tử.

Dùng em cho mọi cỡ chữ

Cỡ chữ em lồng nhau chồng chất và làm bạn ngạc nhiên. Hãy dùng rem cho cỡ chữ.

Làm tròn thành một con số trông gọn nhưng sai

1,43 không giống 1,5 khi nhân với một cỡ chữ lớn. Hãy giữ đủ chữ số.

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 px sang em.

Tóm tắt

Để chuyển px sang em ở đây, hãy gõ cỡ bằng pixel và cỡ chữ mà nó tương đối với, và đọc kết quả ngay, dùng công thức em = px ÷ 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 cỡ chữ của chính phần tử, hay của 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.