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-size
bấ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-size
trong 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 px
các giá trị vì chúng là tiêu chuẩn thực tế. pt
, in
Và 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 px
bạn có thể sử dụng 1px
, với pt
bạ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
rem
Giá trị mặc định của 16px
không phải là một đối số rất mạnh cho việc sử dụng nó. Viết 0.0625rem
cò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 rem
lợ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
px
giá trị rõ ràng của rem
bấ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 16px
mặ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 24px
hoặc 32px
sử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 32px
trên một 640px
trì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 16px
trên một 320px
trì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 px
giá trị biểu kiến
Bởi vì rem
được dựa trên font-size
các :root
nút, nếu bạn muốn thay đổi những gì 1rem
thể 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 :root
phần tử font-size
thành px
giá trị.
Nếu bạn đặt font-size
trên html
một px
giá 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 :root
là 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 16
vớ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ố 20
khô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 rem
bằ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-size
cho 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-size
trên body
sử 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 rem
là 10px
có nghĩa là bất kỳ giá trị nào bạn có thể đã viết px
có thể được chuyển đổi trực tiếp thành rem
bằ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ó 1rem
bằ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 đó rem
là 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 rem
phả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 rem
thay đổ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?
rem
trong các truy vấn phương tiện sử dụng giá trị ban đầu font-size
và 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-size
với :root
phầ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ề :root
kích thước phông chữ thực sự thay đổi các rem
giá 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 :root
phầ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 em
cá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 rem
sẽ 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 rem
sang 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 rem
sẽ 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 16px
theo 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 15px
hay 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.