Tôi nên sử dụng đơn vị giá trị px hoặc rem trong CSS của mình? [đóng cửa]


375

Tôi đang thiết kế một trang web mới và tôi muốn nó tương thích với càng nhiều trình duyệt và cài đặt trình duyệt càng tốt. Tôi đang cố gắng quyết định đơn vị đo lường nào tôi nên sử dụng cho kích thước phông chữ và các yếu tố của mình, nhưng không thể tìm thấy câu trả lời kết luận.

Câu hỏi của tôi là: tôi nên sử dụng pxhoặc remtrong CSS của tôi?

  • Cho đến nay tôi biết rằng việc sử dụng pxkhông tương thích với người dùng điều chỉnh kích thước phông chữ cơ bản trong trình duyệt của họ.
  • Tôi đã không quan tâm đến emhọ bởi vì họ gặp nhiều rắc rối hơn để duy trì, so với rems, khi họ xếp tầng.
  • Một số người nói rằng rems là độ phân giải độc lập và do đó mong muốn hơn. Nhưng những người khác nói rằng hầu hết các trình duyệt hiện đại đều thu phóng tất cả các yếu tố như nhau, vì vậy việc sử dụng pxkhông phải là vấn đề.

Tôi đang hỏi điều này bởi vì có rất nhiều ý kiến ​​khác nhau về đâu là thước đo khoảng cách mong muốn nhất trong CSS và tôi không chắc cái nào là tốt nhất.


4
Đây là một vấn đề tranh chấp và tranh luận và ý kiến, không phải là loại câu hỏi kỹ thuật mà SO giỏi. Nhân tiện, câu trả lời đúng là Số Số. ☺
Jukka K. Korpela

2
Ngay cả những bình luận đã lỗi thời. Chỉ vì OP yêu cầu ý kiến ​​đúng, không có nghĩa là chúng tôi sẽ chỉ đưa ra ý kiến ​​của riêng mình. Gần 8 năm sau, câu hỏi này cho thấy vẫn còn quan tâm đến việc chủ đề phát triển như thế nào. Câu trả lời hiện tại được chứng minh và đủ kỹ thuật và KHÔNG quan điểm. Do đó, tôi đề nghị chỉnh sửa từ "ý kiến" thành "kinh nghiệm" để chúng ta không rơi vào cái bẫy mở lại và đóng lại câu hỏi nhiều lần.
Tim Vermaelen

2
@TimVermaelen câu hỏi này chỉ được đóng lại một lần trong đời. Thay đổi được thực hiện không phải là một vấn đề thực sự, vì câu trả lời vẫn hoàn toàn phụ thuộc vào bối cảnh không thể cung cấp trừ khi OP chỉnh sửa câu hỏi để hỏi về một kịch bản cụ thể. Không có tùy chọn "tốt nhất" cho tất cả các trường hợp, do đó câu hỏi này dựa trên quan điểm.
TylerH

Câu trả lời:


418

TL; DR: sử dụng px.

Sự thật

  • Đầu tiên, điều cực kỳ quan trọng là phải biết rằng trên mỗi thông số kỹ thuật , pxđơn vị CSS không bằng một pixel hiển thị vật lý. Điều này luôn luôn đúng - ngay cả trong thông số CSS 1 năm 1996 .

    CSS xác định pixel tham chiếu , đo kích thước của pixel trên màn hình 96 dpi. Trên màn hình có dpi khác biệt đáng kể so với 96dpi (như màn hình Retina), tác nhân người dùng sẽ điều chỉnh lại pxđơn vị sao cho kích thước của nó khớp với pixel tham chiếu. Nói cách khác, việc định cỡ lại này chính xác là lý do tại sao 1 pixel CSS bằng 2 pixel hiển thị Retina vật lý.

    Điều đó nói rằng, cho đến năm 2010 (và tình huống thu phóng trên thiết bị di động), pxhầu như luôn luôn có một pixel vật lý, bởi vì tất cả các màn hình có sẵn rộng rãi là khoảng 96dpi.

  • Kích thước được chỉ định trong ems có liên quan đến phần tử cha . Điều này dẫn đến em"vấn đề gộp" trong đó các phần tử lồng nhau ngày càng lớn hơn hoặc nhỏ hơn. Ví dụ:

    body { font-size:20px; } 
    div { font-size:0.5em; }

    Cung cấp cho chúng tôi:

    <body> - 20px
        <div> - 10px
            <div> - 5px
                <div> - 2.5px
                    <div> - 1.25px
  • CSS3 rem, vốn chỉ liên quan đến htmlphần tử gốc , hiện được hỗ trợ trên 96% tất cả các trình duyệt đang sử dụng .

Ý kiến

Tôi nghĩ rằng mọi người đều đồng ý rằng thật tốt khi thiết kế các trang của bạn để phù hợp với mọi người và xem xét cho người khiếm thị. Một sự cân nhắc như vậy (nhưng không phải là duy nhất!) Là cho phép người dùng làm cho văn bản của trang web của bạn lớn hơn, để dễ đọc hơn.

Ban đầu, cách duy nhất để cung cấp cho người dùng một cách để chia tỷ lệ kích thước văn bản là sử dụng các đơn vị kích thước tương đối (chẳng hạn như ems). Điều này là do menu kích thước phông chữ của trình duyệt chỉ đơn giản là thay đổi kích thước phông chữ gốc. Do đó, nếu bạn đã chỉ định kích thước phông chữ px, chúng sẽ không mở rộng khi thay đổi tùy chọn kích thước phông chữ của trình duyệt.

Các trình duyệt hiện đại (và thậm chí cả IE7 không hiện đại) đều thay đổi phương pháp chia tỷ lệ mặc định thành đơn giản là phóng to mọi thứ, bao gồm cả hình ảnh và kích thước hộp. Về cơ bản, chúng làm cho pixel tham chiếu lớn hơn hoặc nhỏ hơn.

Vâng, ai đó vẫn có thể thay đổi kiểu mặc định trình duyệt của họ để tinh chỉnh kích thước phông chữ mặc định (tương đương với tùy chọn kích thước phông chữ kiểu cũ), nhưng đó là một cách rất bí truyền đi về nó và tôi muốn cược không ai 1 hiện nó. (Trong Chrome, nó bị chôn vùi dưới các cài đặt nâng cao, Nội dung web, Kích thước phông chữ. Trong IE9, nó thậm chí còn bị ẩn nhiều hơn. Bạn phải nhấn Alt và đi đến Xem, Kích thước văn bản.) Dễ dàng hơn nhiều khi chỉ cần chọn tùy chọn Thu phóng trong menu chính của trình duyệt (hoặc sử dụng bánh xe Ctrl+ +/ -/ chuột).

1 - trong lỗi thống kê, tự nhiên

Nếu chúng tôi giả sử hầu hết người dùng chia tỷ lệ trang bằng tùy chọn thu phóng, tôi thấy các đơn vị tương đối chủ yếu không liên quan. Việc phát triển trang của bạn sẽ dễ dàng hơn nhiều khi mọi thứ được chỉ định trong cùng một đơn vị (hình ảnh đều được xử lý bằng pixel) và bạn không phải lo lắng về việc ghép. ( "Tôi được cho biết sẽ không có toán học" - có vấn đề với việc phải tính toán 1,5em thực sự hoạt động ra sao.)

Một vấn đề tiềm năng khác của việc chỉ sử dụng các đơn vị tương đối cho kích thước phông chữ là phông chữ được người dùng thay đổi kích thước có thể phá vỡ các giả định bố cục của bạn. Ví dụ, điều này có thể dẫn đến văn bản bị cắt bớt hoặc chạy quá lâu. Nếu bạn sử dụng các đơn vị tuyệt đối, bạn không phải lo lắng về kích thước phông chữ không mong muốn phá vỡ bố cục của mình.

Vì vậy, câu trả lời của tôi là sử dụng đơn vị pixel. Tôi sử dụng pxcho tất cả mọi thứ. Tất nhiên, tình huống của bạn có thể khác nhau và nếu bạn phải hỗ trợ IE6 (có thể các vị thần của RFC sẽ thương xót bạn), emdù sao bạn cũng sẽ phải sử dụng s.


43
Bạn nên sử dụng pixel và rem. Vì vậy, các trình duyệt mới hơn nhận được rem và các trình duyệt cũ quay trở lại pixel (giống như WordPress 2012). Điều này có thể được tự động hóa bằng Sass hoặc Ít hơn, vì vậy tất cả những gì bạn làm là nhập giá trị px và nó tự động xuất ra px và rem.
cchiera

63
Vấn đề lớn của tôi với lập luận này là khi điều chỉnh kích thước phông chữ và khoảng cách tại các điểm dừng đáp ứng, bạn có thể đặt kích thước phông chữ mới trên phần tử html và mọi phép đo bạn đặt trong rem sẽ tự động điều chỉnh, trong khi với px bạn sẽ cần phải viết quy tắc mới cho mọi phép đo bạn muốn điều chỉnh. Tất nhiên có thể cần nhiều điều chỉnh hơn ngay cả khi sử dụng rem, nhưng với kế hoạch thông minh, bạn sẽ có được một lượng lớn tỷ lệ tỷ lệ miễn phí. Nhập các phép đo khoảng cách hộp nhất định để gõ, mã nhẹ hơn và độ phức tạp ít hơn / khả năng bảo trì nhiều hơn tương đương với một chiến thắng rõ ràng cho tôi.
RobW

16
Giả sử rằng không có người dùng thay đổi cài đặt kích thước phông chữ là khá đậm. Yêu cầu như vậy nên được hỗ trợ với dữ liệu. Mặt khác, nó chỉ là một cách để xa lánh một số người dùng vốn đã mong manh (ppl khiếm thị nặng). Nếu bạn có thể, sử dụng rem thay vì px. IMO, các ứng dụng sẽ có thể mở rộng độc lập giao diện và kích thước phông chữ của chúng. "Chỉ sử dụng px" là điều mà nhiều nhà phát triển đang vật lộn với vấn đề muốn nghe, nhưng đó không phải là câu trả lời đúng cho web.
Olivvv

18
Sẽ là tuyệt vời để có một theo dõi về điều này. Rem hiện ở mức 95% + hỗ trợ.
Học thống kê bằng ví dụ

10
Sai, tôi không quan tâm đến IE (không ai nên).
Vahid Amiri

194

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 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 :root16px, 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 rem10pxcó 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-sizekhô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.


Tôi biết điều này là muộn nhưng, tôi thích cách sử dụng REM, nhưng tôi gặp vấn đề nhất khi sử dụng rem là khi tôi sử dụng matrix()javascript, đó là các giá trị dịch ma trận đang sử dụng px(sửa tôi nếu tôi sai) và tôi rất bối rối với nó .
Ampersanda

3
@Ampersanda, trong JavaScript phần lớn bạn sẽ sử dụng các giá trị pixel được tính toán. Đề nghị của tôi là chuyển đổi các lớp nếu có thể để CSS có thể quản lý mọi thứ trông như thế nào. Đối với một số điều bạn sẽ không thể tránh sử dụng JS để tính toán các giá trị pixel, vì vậy, cách tốt nhất của bạn là tính toán giá trị pixel từ trạng thái DOM.
zzzzBov

Tôi thấy, vì vậy tôi phải getComputedStyle()nhưng kết quả luôn ở trên pixel, vì vậy tôi phải chia kết quả cho remgiá trị (như 16). CMIIW
Ampersanda

@Ampersanda chỉ khi bạn thực sự tạo ra một remgiá trị, nếu bạn đã có pxgiá trị chính xác , không cần phải chuyển sang remđơn vị cho những thứ đã được tính toán cho bối cảnh cụ thể.
zzzzBov

1
có 1rem bằng 1px này nguyên nhân khó khăn do font-size tối thiểu của Chrome: stackoverflow.com/questions/44378664/... stackoverflow.com/questions/24200797/...
Paul

44

Bài viết này mô tả khá tốt những ưu và nhược điểm của việc px, emrem.

Cuối cùng, tác giả kết luận rằng phương pháp tốt nhất có lẽ là sử dụng cả hai pxrem, khai báo pxtrước cho các trình duyệt cũ hơn và khai báo lại remcho các trình duyệt mới hơn:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

1
Vâng, đó là điều khiến tôi quan tâm đến phần còn lại ngay từ đầu. Hai điều tôi không hiểu: anh ta chỉ khuyên nó như một đơn vị đo lường cho phông chữ (không phải các yếu tố) và nếu tôi hiểu chính xác anh ta, lý do thực sự duy nhất để sử dụng (r) em là để người dùng IE có thể thay đổi kích thước văn bản?

1
@Samuel Tôi tin là như vậy. Nếu không cho thay đổi kích thước văn bản, tôi tin rằng chúng tôi muốn sử dụng px. Đối với đơn vị cho các yếu tố, việc gắn bó pxsẽ tốt hơn vì bạn thường muốn kích thước chính xác các yếu tố.
uzyn

Nhưng nếu bạn làm điều đó, bất kỳ cài đặt trình duyệt nào xác định lại kích thước phông chữ cơ sở sẽ làm hỏng bố cục của bạn phải không? Tại sao không rem cho tất cả mọi thứ?

1
Như nhiều ý kiến ​​lưu ý ở đây rằng, lý do chúng tôi cần bỏ qua pxlà để cho phép thay đổi kích thước. Bây giờ nếu chúng ta sử dụng rem, chúng ta vẫn phải cung cấp pxdự phòng (trong các trình duyệt cũ hơn). Về cơ bản những gì nó có nghĩa là pxthay đổi kích thước hỗ trợ là tốt hơn rem. Các trình duyệt mới hơn hỗ trợ pxthay đổi kích thước và cho các trình duyệt cũ hơn bất kỳ cách nào chúng tôi sẽ dự phòng px. Bây giờ dựa trên ánh sáng của kết luận này, tôi rất muốn biết, tại sao lại sử dụng rem? Nếu tôi có thể nhìn thấy ánh sáng ở cuối đường hầm.
hợp nhất

3
Không có gì đảm bảo rằng các giá trị như 62,5% = 10px. Nó chỉ đúng khi kích thước phông chữ mặc định của trình duyệt đã được đặt thành 16px. Mặc dù đây là mặc định, nhưng nó không được bảo đảm.
cimmanon

7

Như một câu trả lời phản xạ, tôi khuyên bạn nên sử dụng rem, vì nó cho phép bạn thay đổi "mức thu phóng" của toàn bộ tài liệu cùng một lúc, nếu cần. Trong một số trường hợp, khi bạn muốn kích thước tương đối với phần tử cha, thì hãy sử dụng em.

Nhưng hỗ trợ rem là không chính xác, IE8 cần một polyfill và Webkit đang có lỗi. Hơn nữa, tính toán pixel phụ có thể khiến những thứ như một dòng pixel đôi khi biến mất. Biện pháp khắc phục là mã bằng pixel cho các yếu tố rất nhỏ như vậy. Điều đó giới thiệu thậm chí phức tạp hơn.

Vì vậy, về tổng thể, hãy tự hỏi liệu nó có đáng không - điều quan trọng và có khả năng là bạn thay đổi "mức thu phóng" của toàn bộ tài liệu trong CSS như thế nào?

Đối với một số trường hợp là có, đối với một số trường hợp, nó sẽ là không.

Vì vậy, nó phụ thuộc vào nhu cầu của bạn và bạn phải cân nhắc ưu và nhược điểm, bởi vì sử dụng rem và em giới thiệu một số cân nhắc bổ sung so với quy trình làm việc dựa trên pixel "bình thường".

Hãy nhớ rằng thật dễ dàng để chuyển đổi (hoặc chuyển đổi) CSS của bạn từ px sang rem (JavaScript là một câu chuyện khác), bởi vì hai khối mã CSS sau đây sẽ tạo ra cùng một kết quả:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}

6

Có, REM và PX là tương đối nhưng các câu trả lời khác đã đề xuất sử dụng REM trên PX, tôi cũng muốn sao lưu điều này bằng một ví dụ về khả năng truy cập.
Khi người dùng đặt kích thước phông chữ khác nhau trên trình duyệt, REM sẽ tự động chia tỷ lệ lên và xuống các yếu tố như phông chữ, hình ảnh, v.v. trên trang web không phải là trường hợp của PX.


Trong gif bên dưới, văn bản bên trái được đặt bằng đơn vị kích thước phông chữ REM trong khi phông chữ bên phải được đặt bởi đơn vị PX.

nhập mô tả hình ảnh ở đây

Như bạn có thể thấy rằng REM đang tự động tăng / giảm tỷ lệ khi tôi thay đổi kích thước phông chữ mặc định của trang web. (Phía dưới bên phải)

Kích thước phông chữ mặc định của trang web là 16px bằng 1 rem (chỉ dành cho trang html mặc định tức là html{font-size:100%}), vì vậy, 1.25rem bằng 20px.

PS: ai khác đang sử dụng REM? Khung CSS! như Bootstrap 4, Bulma CSS, v.v., vì vậy tốt hơn hãy hòa hợp với nó.


3

Câu trả lời của josh3736 là một câu hỏi hay, nhưng để cung cấp một phản biện 3 năm sau:

Tôi khuyên bạn nên sử dụng remcác đơn vị cho phông chữ, nếu chỉ vì nó giúp bạn , nhà phát triển dễ dàng thay đổi kích thước hơn. Đúng là người dùng rất hiếm khi thay đổi kích thước phông chữ mặc định trong trình duyệt của họ và thu phóng trình duyệt hiện đại sẽ tăng quy mô pxđơn vị. Nhưng điều gì sẽ xảy ra nếu sếp của bạn đến gặp bạn và nói rằng "đừng phóng to hình ảnh hoặc biểu tượng, mà hãy làm cho tất cả các phông chữ lớn hơn". Thật dễ dàng hơn nhiều khi chỉ thay đổi kích thước phông chữ gốc và để tất cả các phông chữ khác có tỷ lệ tương ứng với đó, sau đó thay đổipx kích thước theo hàng chục hoặc hàng trăm quy tắc css.

Tôi nghĩ rằng vẫn hợp lý khi sử dụng pxcác đơn vị cho một số hình ảnh hoặc cho các yếu tố bố cục nhất định phải luôn có cùng kích thước bất kể quy mô của thiết kế.

Caniuse.com có ​​thể đã nói rằng chỉ có 75% trình duyệt khi josh3736 đăng câu trả lời của anh ấy vào năm 2012, nhưng đến ngày 27 tháng 3, họ yêu cầu hỗ trợ 93,78% . Chỉ IE8 không hỗ trợ nó trong số các trình duyệt họ theo dõi.


1
Only IE8 doesn't support it among the browsers they track.Huh? Trang được liên kết nói rằng, IE IE9 & IE10 không hỗ trợ các đơn vị rem khi được sử dụng trong thuộc tính tốc ký phông chữ hoặc khi được sử dụng trên các phần tử giả. IE9, 10 & 11 don Hỗ trợ các đơn vị rem khi được sử dụng trong thuộc tính chiều cao dòng khi được sử dụng trên: trước và sau các phần tử giả. Biên giới có kích thước trong rem biến mất khi thu nhỏ trang trong Chrome. Doesn không hoạt động trên trình duyệt Samsung Note II Android 4.3 & Samsung Galaxy Tab 2 trên Android 4.2. Chrome 31-34 & Android dựa trên Chrome (như 4.4) có lỗi kích thước phông chữ xảy ra khi phần tử gốc có kích thước dựa trên tỷ lệ phần trăm.
e-sushi

Ngoài ra, liên quan đến của bạn as of March 27 they claim 93.78% support.Tại thời điểm viết bình luận này, caniuse chỉ hiển thị 91,79% hỗ trợ trình duyệt đầy đủ. Nhìn vào tỷ lệ phần trăm của bạn, tôi rất chắc chắn rằng bạn cũng bao gồm hỗ trợ trình duyệt lỗi (hiện ở mức 2,8%, có thể được hiểu là mức độ bao phủ 94,6% lạc quan - nhưng thực tế là 2,8% đó có lỗi, không đầy đủ hoặc thậm chí hoàn toàn không hỗ trợ, như đã lưu ý trong nhận xét trước đây của tôi: mỗi lỗi là kết quả của các phiên bản trình duyệt và kết hợp hệ điều hành khác nhau.) Bạn có thể muốn sửa câu trả lời của mình cho phù hợp với trò chơi
e-sushi

1

Tôi đã tìm thấy cách tốt nhất để lập trình kích thước phông chữ của trang web là xác định kích thước phông chữ cơ bản cho bodyvà sau đó sử dụng em (hoặc rem) cho mỗi cái khác font-sizemà tôi tuyên bố sau đó. Tôi cho rằng đó là sở thích cá nhân, nhưng nó phục vụ tốt cho tôi và cũng rất dễ dàng để kết hợp một thiết kế nhạy hơn .

Theo như sử dụng các đơn vị rem, tôi nghĩ thật tốt khi tìm thấy sự cân bằng giữa việc tiến bộ trong mã của bạn, nhưng cũng cung cấp hỗ trợ cho các trình duyệt cũ hơn. Kiểm tra liên kết này về hỗ trợ trình duyệt cho các đơn vị rem , điều đó sẽ giúp ích rất nhiều cho quyết định của bạn.


Đồng ý. Nhưng thiết kế đáp ứng có dễ dàng thực hiện với các đơn vị px không (chỉ cần viết các truy vấn phương tiện của bạn dựa trên px thay vì em)?

Tuy nhiên, bạn có thể làm cho kích thước phông chữ của mình nhỏ hơn khi chiều rộng khung nhìn trang web của bạn trở nên nhỏ hơn thì bạn có thể thay đổi bodykích thước phông chữ và mọi thứ thay đổi theo nó.
cereallarceny

Tôi không thực sự lo lắng về hỗ trợ trình duyệt. Tôi sẽ chỉ bao gồm kích thước px dự phòng cho tất cả các kích thước, để các trình duyệt cũ hơn có gì đó để giải thích.

Sau đó, đi cho cách tiến bộ bằng cách sử dụng rem. Miễn là bạn cung cấp một dự phòng, sau đó tôi thấy không có hại. Đối với tôi mặc dù nó chỉ giống như làm thêm, nhưng có lẽ không phải trong tình huống của bạn.
cereallarceny

0

pttương tự như remở chỗ nó tương đối cố định, nhưng hầu như luôn độc lập với DPI, ngay cả khi các trình duyệt không tuân thủ xử lý pxtheo kiểu phụ thuộc vào thiết bị. remthay đổi theo kích thước phông chữ của phần tử gốc, nhưng bạn có thể sử dụng một cái gì đó như Sass / La bàn để thực hiện việc này một cách tự động pt.

Nếu bạn đã có điều này:

html {
    font-size: 12pt;
}

sau đó 1remsẽ luôn luôn là như vậy 12pt. rememchỉ độc lập với thiết bị như các yếu tố mà chúng dựa vào; một số trình duyệt không hoạt động theo thông số kỹ thuật và xử lý theo pxnghĩa đen. Ngay cả trong những ngày xưa của Web, 1 điểm vẫn được coi là 1/72 inch - nghĩa là có 72 điểm trong một inch.

Nếu bạn có một trình duyệt cũ, không tuân thủ và bạn có:

html {
    font-size: 16px;
}

sau đó 1remsẽ phụ thuộc vào thiết bị. Đối với các yếu tố sẽ kế thừa từ htmlmặc định, 1emcũng sẽ phụ thuộc vào thiết bị. 12ptsẽ là tương đương độc lập với thiết bị được đảm bảo hy vọng : 16px / 96px * 72pt = 12pt, ở đâu 96px = 72pt = 1in.

Nó có thể trở nên khá phức tạp để làm toán nếu bạn muốn bám vào các đơn vị cụ thể. Ví dụ .75em of html = .75rem = 9pt, và .66em of .75em of html = .5rem = 6pt. Một nguyên tắc nhỏ:

  • Sử dụng ptcho kích thước tuyệt đối. Nếu bạn thực sự cần điều này để năng động so với phần tử gốc, bạn đang yêu cầu quá nhiều CSS; bạn cần một ngôn ngữ biên dịch thành CSS, như Sass / SCSS.
  • Sử dụng emcho kích thước tương đối. Thật tiện dụng khi có thể nói, "Tôi muốn lề bên trái có chiều rộng tối đa của một chữ cái" hoặc "Làm cho văn bản của phần tử này chỉ lớn hơn một chút so với môi trường xung quanh." <h1>là một yếu tố tốt để sử dụng kích thước phông chữ trong EMS, vì nó có thể xuất hiện ở nhiều nơi khác nhau, nhưng phải luôn lớn hơn văn bản gần đó. Theo cách này, bạn không phải có một cỡ chữ riêng cho mỗi lớp được áp dụng cho h1: cỡ chữ sẽ tự động điều chỉnh.
  • Sử dụng pxcho kích thước rất nhỏ. Ở kích thước rất nhỏ, ptcó thể bị mờ trong một số trình duyệt ở 96 DPI, ptpxkhông hoàn toàn xếp hàng. Nếu bạn chỉ muốn tạo một viền mỏng, một pixel, hãy nói như vậy. Nếu bạn có màn hình DPI cao, điều này sẽ không rõ ràng đối với bạn trong quá trình thử nghiệm, do đó hãy chắc chắn thử nghiệm trên màn hình 96-DPI chung tại một số điểm.
  • Đừng thỏa thuận các chuỗi con để làm cho mọi thứ trở nên lạ mắt trên màn hình DPI cao. Một số trình duyệt có thể hỗ trợ nó - đặc biệt là trên màn hình DPI cao - nhưng không. Hầu hết người dùng thích lớn và rõ ràng, mặc dù web đã dạy chúng tôi các nhà phát triển khác. Nếu bạn muốn thêm chi tiết mở rộng cho người dùng của mình bằng màn hình hiện đại, bạn có thể sử dụng đồ họa vector (đọc: SVG), dù sao bạn cũng nên làm.

1
pt dành cho phương tiện in và không bao giờ nên được sử dụng cho màn hình
sf

@sf CSS định nghĩa pt và px sao cho chúng luôn có cùng tỷ lệ, mặc dù điều này không chính xác về mặt kỹ thuật sử dụng các thuật ngữ đó (72pt = 96px = 1in). Thực tế, trong CSS, px không thực sự là một pixel thiết bị. Trên màn hình của tôi, 1px là 2 pixel thiết bị. Ưu điểm của việc sử dụng pt trên px là bạn có thể dễ dàng chỉ định kích thước phần tử liên quan đến kích thước liên quan đến văn bản.
Zenexer

-2

Một nửa (nhưng chỉ một nửa) câu trả lời lén lút (nửa còn lại là sự khinh bỉ cay đắng đối với thực tế quan liêu):

Sử dụng vh

Tất cả mọi thứ luôn có kích thước để cửa sổ trình duyệt.

Luôn cho phép cuộn xuống, không bao giờ sang một bên.

Đặt chiều rộng cơ thể là 50vh tĩnh và không có gì nổi hoặc thoát ra khỏi div cha. Và phong cách chỉ sử dụng bảng để mọi thứ được tổ chức cứng nhắc như mong đợi. Bao gồm chức năng javascript để hoàn tác mọi hoạt động ctrl +/- mà người dùng có thể thực hiện.

Mọi người sẽ ghét bạn ngoại trừ những người bảo bạn làm mọi thứ phù hợp với sự nhạo báng của họ, và họ sẽ ngây ngất. Và mọi người đều biết ý kiến ​​của họ là vấn đề duy nhất.


-3

Đúng. Hoặc, đúng hơn, không.

Er, ý tôi là, nó không thành vấn đề. Sử dụng một trong đó có ý nghĩa cho dự án cụ thể của bạn. PX và EM hoặc cả hai đều hợp lệ như nhau nhưng sẽ hoạt động khác nhau một chút tùy thuộc vào kiến ​​trúc CSS của trang tổng thể của bạn.

CẬP NHẬT:

Để làm rõ, tôi nói rằng thường thì không có vấn đề gì khi bạn sử dụng. Đôi khi, bạn có thể đặc biệt muốn chọn cái này hơn cái kia. EM là tốt nếu bạn có thể bắt đầu từ đầu và muốn sử dụng một kích thước phông chữ cơ bản và làm cho mọi thứ liên quan đến đó.

PX thường là cần thiết khi bạn trang bị lại thiết kế lại trên cơ sở mã hiện có và cần tính đặc hiệu của px để ngăn chặn các vấn đề lồng ghép xấu.


Vì vậy, câu trả lời của bạn là nó không quan trọng? Hoặc có những tình huống nhất định trong đó bạn sẽ đánh giá cao cái này hơn cái kia? Và nếu vậy, trong tình huống nào đây sẽ là trường hợp?

@Samuel có, có thể đôi khi bạn muốn sử dụng cái này hay cái khác. Tôi đã cập nhật câu trả lời của mình với nhiều thông tin hơn.
DA.

Xin lỗi, tôi có một chút nhầm lẫn với từ ngữ ban đầu. Nó nghĩ rằng bạn đã có REM trong tiêu đề và EM trong cơ thể. Có vẻ như bạn đang hỏi về REM. Câu trả lời vẫn khá giống nhau, nhưng REM có một số lợi ích bổ sung cần xem xét nhưng chủ yếu được sử dụng giống như EM - nó cho phép bạn sử dụng cỡ chữ 'cơ sở'.
DA.

Tại sao " em [...] lại đẹp nếu bạn có thể bắt đầu từ đầu và muốn sử dụng kích thước phông chữ cơ bản và làm mọi thứ liên quan đến điều đó. "? Lợi thế của (r) em so với px là gì? Có phải vì vậy người dùng IE có thể thay đổi kích thước văn bản, hoặc có những lợi thế khác so với px (có vẻ đơn giản hơn)?

EM và REM có cùng lợi ích: bạn có thể đặt HTML hoặc BODY thành một kích thước phông chữ cụ thể (giả sử là 10px) và sau đó đặt mọi thứ khác thành EM hoặc REM. Bằng cách đó, nếu bạn muốn làm cho tất cả các loại lớn hơn theo tỷ lệ, bạn chỉ cần thay đổi một kiểu 10px ban đầu thành 11px. Điều này hữu ích hơn 5 năm trước khi tất cả chúng ta đều xây dựng các widget thay đổi kích thước phông chữ dựa trên JS tùy chỉnh của riêng mình. Ngày nay, các trình duyệt thực hiện công việc tốt hơn như vậy trong việc phóng to (đặc biệt là thiết bị di động) mà tôi thấy nó ít lợi ích hơn nhiều. Nếu bạn thấy PX đơn giản hơn, thì đó là một lợi ích cho bạn và chắc chắn là một lý do hợp lệ để đi với PX.
DA.

-4

Em là con đường phía trước, không chỉ cho phông chữ mà bạn có thể sử dụng chúng với các hộp, độ dày của dòng và các thứ khác nữa, tại sao?

Đặt đơn giản là em là những cái duy nhất mở rộng đồng nhất với các phím alt + và alt trong trình duyệt để phóng to.

Các phép đo khác quy mô, nhưng không sạch như em.

Ngoài ra, nếu bạn muốn điều chỉnh tỷ lệ tốt nhất, hãy chuyển đổi đồ họa của bạn sang SVG dựa trên vectơ nếu có thể vì chúng cũng sẽ chia tỷ lệ sạch với tỷ lệ thu phóng của trình duyệt.


3
Nhưng hầu hết các trình duyệt hiện nay đều phóng to tất cả các thành phần trang bằng nhau (trừ khi bạn điều chỉnh kích thước phông chữ cơ bản), vì vậy lợi thế của việc sử dụng (r) em không đúng với các trình duyệt hiện đại phải không?

Đó là và nó không phải, trong khi bạn nói chính xác những gì bạn nói, nó nói nhiều hơn về yếu tố tỷ lệ trái ngược với đồng bằng tỷ lệ. Đồng bằng sẽ luôn đồng nhất bất kể phép đo được sử dụng, nhưng hệ số tỷ lệ (cung cấp toán học được thực hiện chính xác) sẽ điều chỉnh khi cần thiết để nói màn hình rộng so với màn hình chuẩn hoặc pixel hình chữ nhật so với pixel vuông. Bởi vì các bản rems thực sự dựa trên một phép đo thực sự của máy in, nên tỷ lệ sẽ luôn phù hợp hơn, các phần khác (chẳng hạn như%) thường ở mức bù tốt nhất
Shawty

(tiếp) với phép nhân được áp dụng trên cả hai hướng, và kết quả là trong một số trường hợp có thể đưa ra tỷ lệ xem không tương xứng xấu.
Shawty

2
"Đặt đơn giản là em là những người duy nhất mở rộng đồng nhất với các phím alt + và alt trong trình duyệt để phóng to." = đó là không chính xác.
DA.

Ok để tôi có thể nói từ đó tốt hơn, xem bình luận trước của tôi để sửa chữa.
choàng

-5

EM là điều DUY NHẤT quy mô cho các truy vấn phương tiện xử lý tỷ lệ +/-, mà mọi người làm mọi lúc, không chỉ người mù. Đây là một minh chứng chuyên nghiệp bằng văn bản rất tốt về lý do tại sao điều này quan trọng.

Nhân tiện, đây là lý do tại sao Zurb Foundation sử dụng ems , trong khi Bootstrap 3 kém hơn vẫn sử dụng pixel.


2
Điều này không thực sự chính xác. Trong những ngày xưa, các pixel không thể được phóng to trong các phiên bản IE cũ. +/- hiện thực hiện phóng to toàn bộ trang trong tất cả các trình duyệt hiện tại, vì vậy đây không phải là vấn đề. Ngoài ra, câu hỏi này là về rems chứ không phải px - không phải em vs px.
Rich Bradshaw

1
Các bạn làm cho tôi cười. Bạn thậm chí đã thử mở rộng quy mô trang web của mình bằng cách sử dụng +/- bằng pixel chưa? Việc viết lên các pixel được phóng to là sai. Bỏ phiếu cho tôi tất cả những gì bạn muốn. Phiếu bầu không thay đổi thực tế.
robmuh

1
Có lẽ chúng ta đang lấy những thứ hơi khác nhau - bất kỳ cơ hội nào bạn có thể đưa ra một bản demo đơn giản để chứng minh sự khác biệt?
Bradshaw giàu có

Tôi không nghĩ câu hỏi là về việc sử dụng đơn vị nào trong các truy vấn phương tiện Truyền thông
binki
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.