Tôi muốn ca ngợi câu trả lời của josh3736 vì đã cung cấp một số bối cảnh lịch sử tuyệt vời. Trong khi nó được khớp nối tốt, bối cảnh CSS đã thay đổi trong gần năm năm kể từ khi câu hỏi này được hỏi. Khi câu hỏi này được hỏi, px là câu trả lời đúng, nhưng điều đó không còn đúng ngày hôm nay.
tl; dr: sử dụngrem
Tổng quan về đơn vị
Các pxđơn vị lịch sử thường đại diện cho một pixel thiết bị. Với các thiết bị có mật độ điểm ảnh cao hơn và cao hơn, điều này không còn giữ được cho nhiều thiết bị, như với Màn hình Retina của Apple.
remđơn vị đại diện cho kích thước r oot em . Đó là font-sizebất cứ điều gì phù hợp :root. Trong trường hợp của HTML, đó là <html>phần tử; đối với SVG, đó là <svg>yếu tố. Mặc định font-sizetrong mọi trình duyệt * là 16px.
Tại thời điểm viết, remđược hỗ trợ bởi khoảng 98% người dùng . Nếu bạn lo lắng về 2% kia, tôi sẽ nhắc bạn rằng các truy vấn phương tiện cũng được khoảng 98% người dùng hỗ trợ .
Đang sử dụng px
Phần lớn các ví dụ CSS trên internet sử dụng pxcác giá trị vì chúng là tiêu chuẩn thực tế. pt, inVà một loạt các đơn vị khác có thể đã được sử dụng trong lý thuyết, nhưng họ đã không xử lý các giá trị nhỏ cũng như bạn muốn một cách nhanh chóng cần phải nghỉ mát để phân số, mà là thời gian để loại, và khó khăn hơn để lý do về.
Nếu bạn muốn có một đường viền mỏng, với pxbạn có thể sử dụng 1px, với ptbạn cần sử dụng 0.75ptđể có kết quả nhất quán và điều đó không thuận tiện lắm.
Đang sử dụng rem
remGiá trị mặc định của 16pxkhông phải là một đối số rất mạnh cho việc sử dụng nó. Viết 0.0625remcòn tệ hơn viết 0.75pt, vậy tại sao mọi người sẽ sử dụng rem?
Có hai phần remlợi thế so với các đơn vị khác.
- Sở thích của người dùng được tôn trọng
- Bạn có thể thay đổi
pxgiá trị rõ ràng của rembất cứ điều gì bạn muốn
Tôn trọng sở thích người dùng
Thu phóng trình duyệt đã thay đổi rất nhiều trong những năm qua. Trong lịch sử, nhiều trình duyệt sẽ chỉ mở rộng quy mô font-size, nhưng điều đó đã thay đổi khá nhanh khi các trang web nhận ra rằng các thiết kế pixel hoàn hảo đẹp mắt của họ đang phá vỡ bất cứ khi nào ai đó phóng to hoặc thu nhỏ. Tại thời điểm này, các trình duyệt chia tỷ lệ toàn bộ trang, do đó, thu phóng dựa trên phông chữ sẽ không còn nữa.
Tôn trọng mong muốn của người dùng không nằm ngoài dự đoán. Chỉ vì một trình duyệt được đặt thành 16pxmặc định, không có nghĩa là bất kỳ người dùng nào cũng không thể thay đổi tùy chọn của họ thành 24pxhoặc 32pxsửa lỗi cho tầm nhìn thấp hoặc tầm nhìn kém (ánh sáng chói màn hình cũ). Nếu bạn căn cứ vào các đơn vị của mình rem, bất kỳ người dùng nào ở cỡ chữ cao hơn sẽ thấy một trang web lớn hơn tương ứng. Biên giới sẽ lớn hơn, phần đệm sẽ lớn hơn, lề sẽ lớn hơn, mọi thứ sẽ tăng lên một cách trôi chảy.
Nếu bạn dựa trên các truy vấn phương tiện của mình rem, bạn cũng có thể đảm bảo rằng trang web mà người dùng của bạn thấy phù hợp với màn hình của họ. Một người dùng font-sizeđược thiết lập 32pxtrên một 640pxtrình duyệt rộng, sẽ thấy hiệu quả trang web của bạn như được hiển thị cho người dùng 16pxtrên một 320pxtrình duyệt rộng. Hoàn toàn không có tổn thất cho RWD khi sử dụng rem.
Thay đổi pxgiá trị biểu kiến
Bởi vì remđược dựa trên font-sizecác :rootnút, nếu bạn muốn thay đổi những gì 1remthể hiện, tất cả các bạn phải làm là thay đổi font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Dù bạn làm gì, đừng đặt :rootphần tử font-sizethành pxgiá trị.
Nếu bạn đặt font-sizetrên htmlmột pxgiá trị, bạn đã thổi bay đi sở thích của người dùng mà không có một cách để có được chúng trở lại.
Nếu bạn muốn thay đổi giá trị rõ ràng của rem, hãy sử dụng %các đơn vị.
Toán học cho điều này là hợp lý đơn giản.
Kích thước phông chữ rõ ràng :rootlà 16px, nhưng giả sử chúng ta muốn thay đổi nó thành 20px. Tất cả chúng ta cần làm là nhân 16với một số giá trị để có được 20.
Thiết lập phương trình của bạn:
16 * X = 20
Và giải quyết cho X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Làm mọi thứ theo bội số 20không phải là điều tuyệt vời, nhưng một gợi ý phổ biến là làm cho kích thước rõ ràng rembằng 10px. Số ma thuật cho 10/16đó là 0.625, hoặc 62.5%.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Vấn đề bây giờ là mặc định của bạn font-sizecho phần còn lại của trang là bộ cách quá nhỏ, nhưng có một sửa chữa đơn giản cho rằng: Set một font-sizetrên bodysử dụng rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Điều quan trọng cần lưu ý, với sự điều chỉnh này, giá trị rõ ràng remlà 10pxcó nghĩa là bất kỳ giá trị nào bạn có thể đã viết pxcó thể được chuyển đổi trực tiếp thành rembằng cách trả một vị trí thập phân.
padding: 20px;
trở thành
padding: 2rem;
Kích thước phông chữ rõ ràng bạn chọn tùy thuộc vào bạn, vì vậy nếu bạn muốn không có lý do gì bạn không thể sử dụng:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
và có 1rembằng nhau 1px.
Vì vậy, bạn có nó, một giải pháp đơn giản để tôn trọng mong muốn của người dùng đồng thời tránh làm phức tạp quá mức CSS của bạn.
Đợi đã, vậy thì bắt cái gì?
Tôi sợ bạn có thể hỏi điều đó. Nhiều như tôi muốn giả vờ rằng đó remlà phép thuật và giải quyết mọi thứ, vẫn còn một số vấn đề cần lưu ý. Theo ý kiến của tôi , không có gì phá vỡ , nhưng tôi sẽ gọi họ để bạn không thể nói rằng tôi đã không cảnh báo bạn.
Truy vấn truyền thông (sử dụng em)
Một trong những vấn đề đầu tiên bạn sẽ gặp remphải liên quan đến truy vấn phương tiện truyền thông. Hãy xem xét các mã sau đây:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Ở đây giá trị của các remthay đổi tùy thuộc vào việc áp dụng truy vấn phương tiện và truy vấn phương tiện phụ thuộc vào giá trị của rem, vậy điều gì đang xảy ra trên trái đất?
remtrong các truy vấn phương tiện sử dụng giá trị ban đầu font-sizevà không nên (xem phần Safari) có tính đến bất kỳ thay đổi nào có thể xảy ra đối font-sizevới :rootphần tử. Nói cách khác, nó luôn luôn có giá trị 16px.
Điều này hơi khó chịu, vì điều đó có nghĩa là bạn phải thực hiện một số tính toán phân số, nhưng tôi đã thấy rằng hầu hết các truy vấn phương tiện phổ biến đã sử dụng các giá trị là bội số của 16.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
Ngoài ra, nếu bạn đang sử dụng bộ tiền xử lý CSS, bạn có thể sử dụng mixins hoặc biến để quản lý các truy vấn phương tiện của mình, điều này sẽ che giấu vấn đề hoàn toàn.
Safari
Thật không may, có một lỗi đã biết với Safari khi các thay đổi về :rootkích thước phông chữ thực sự thay đổi các remgiá trị được tính cho phạm vi truy vấn phương tiện. Điều này có thể gây ra một số hành vi rất lạ nếu kích thước phông chữ của :rootphần tử bị thay đổi trong truy vấn phương tiện. May mắn là sửa chữa rất đơn giản: sử dụng emcác đơn vị cho các truy vấn phương tiện truyền thông .
Chuyển đổi bối cảnh
Nếu bạn chuyển đổi giữa các dự án khác nhau, các dự án khác nhau, có thể kích thước phông chữ rõ ràng remsẽ có các giá trị khác nhau. Trong một dự án, bạn có thể đang sử dụng một kích thước rõ ràng trong 10pxđó trong một dự án khác kích thước rõ ràng có thể là 1px. Điều này có thể gây nhầm lẫn và gây ra vấn đề.
Đề nghị duy nhất của tôi ở đây là gắn bó 62.5%để chuyển đổi remsang một kích thước rõ ràng 10px, bởi vì điều đó đã phổ biến hơn trong kinh nghiệm của tôi.
Thư viện CSS được chia sẻ
Nếu bạn đang viết CSS sẽ được sử dụng trên một trang web mà bạn không kiểm soát, chẳng hạn như đối với tiện ích nhúng, thực sự không có cách nào tốt để biết kích thước rõ ràng remsẽ có. Nếu đó là trường hợp, hãy tiếp tục sử dụng px.
Nếu bạn vẫn muốn sử dụng rem, hãy xem xét phát hành phiên bản Sass hoặc LESS của biểu định kiểu với một biến để ghi đè tỷ lệ cho kích thước rõ ràng của rem.
* Tôi không muốn loại bỏ bất kỳ ai sử dụng rem, nhưng tôi chưa thể chính thức xác nhận rằng mọi trình duyệt đều sử dụng 16pxtheo mặc định. Bạn thấy đấy, có rất nhiều trình duyệt và sẽ không khó để một trình duyệt có thể chuyển hướng từng chút một, nói 15pxhay 18px. Tuy nhiên, trong thử nghiệm, tôi chưa thấy một ví dụ nào trong đó trình duyệt sử dụng cài đặt mặc định trong hệ thống sử dụng cài đặt mặc định có bất kỳ giá trị nào khác ngoài 16px. Nếu bạn tìm thấy một ví dụ như vậy, xin vui lòng chia sẻ nó với tôi.
