Tôi nghe nói bạn nên xác định kích thước và khoảng cách trong biểu định kiểu của mình bằng em thay vì bằng pixel. Vì vậy, câu hỏi là tại sao tôi nên sử dụng em thay vì px khi xác định kiểu trong css? Có một ví dụ tốt minh họa điều này?
Câu trả lời:
Thật sai lầm khi nói rằng một là một lựa chọn tốt hơn so với cái kia (hoặc cả hai sẽ không được đưa ra mục đích riêng của họ trong thông số kỹ thuật). Thậm chí có thể đáng chú ý rằng StackOverflow sử dụng rộng rãi các đơn vị px. Đó không phải là sự lựa chọn nghèo nàn mà Spoike đã nói.
Định nghĩa đơn vị
px là một đơn vị tuyệt đối của phép đo (như trong , pt , hoặc cm ) mà cũng sẽ xảy ra là 1/96 của một trong đơn vị (thêm về lý do tại sao sau). Bởi vì nó là một phép đo tuyệt đối, nó có thể được sử dụng bất cứ lúc nào bạn muốn xác định một cái gì đó có kích thước cụ thể, thay vì tỷ lệ với một cái gì đó khác như kích thước của cửa sổ trình duyệt hoặc kích thước phông chữ.
Giống như tất cả các đơn vị tuyệt đối khác, các đơn vị px không chia tỷ lệ theo chiều rộng của cửa sổ trình duyệt. Do đó, nếu toàn bộ thiết kế trang của bạn sử dụng các đơn vị tuyệt đối như px chứ không phải % , thì nó sẽ không thích ứng với chiều rộng của trình duyệt. Điều này vốn không phải là tốt hay xấu, chỉ là một lựa chọn mà nhà thiết kế cần thực hiện giữa việc tuân thủ một kích thước chính xác và không linh hoạt so với kéo dài nhưng trong quá trình không tuân thủ một kích thước chính xác. Nó sẽ là điển hình cho một trang web có sự pha trộn của các đối tượng có kích thước cố định và kích thước linh hoạt.
Các yếu tố kích thước cố định thường cần được tích hợp vào trang - chẳng hạn như biểu ngữ quảng cáo, logo hoặc biểu tượng. Điều này đảm bảo bạn hầu như luôn cần ít nhất một số phép đo dựa trên px trong một thiết kế. Ví dụ, hình ảnh sẽ được chia tỷ lệ sao cho mỗi pixel có kích thước 1 * px *, vì vậy nếu bạn đang thiết kế xung quanh một hình ảnh, bạn sẽ cần các đơn vị px . Nó cũng rất hữu ích cho việc định cỡ phông chữ chính xác và cho độ rộng đường viền, do làm tròn nó có ý nghĩa nhất để sử dụng các đơn vị px cho phần lớn màn hình.
Tất cả các phép đo tuyệt đối đều liên quan chặt chẽ với nhau; nghĩa là, 1in luôn là 96px , cũng như 1in luôn là 72pt . (Lưu ý rằng 1in gần như không bao giờ thực sự là một inch vật lý khi nói về phương tiện dựa trên màn hình). Tất cả các phép đo tuyệt đối giả định độ phân giải màn hình danh nghĩa là 96ppi và khoảng cách xem danh nghĩa của màn hình máy tính để bàn và trên màn hình như vậy, một px sẽ bằng một pixel vật lý trên màn hình và một pixel trongsẽ bằng 96 pixel vật lý. Trên các màn hình khác nhau đáng kể về mật độ pixel hoặc khoảng cách xem hoặc nếu người dùng đã phóng to trang bằng chức năng thu phóng của trình duyệt, px sẽ không còn liên quan đến các pixel vật lý nữa.
em không phải là một đơn vị tuyệt đối - nó là một đơn vị có liên quan đến kích thước phông chữ hiện được chọn. Trừ khi bạn đã ghi đè kiểu phông chữ bằng cách đặt kích thước phông chữ của mình bằng một đơn vị tuyệt đối (chẳng hạn như px hoặc pt ), điều này sẽ bị ảnh hưởng bởi sự lựa chọn phông chữ trong trình duyệt hoặc HĐH của người dùng nếu họ đã tạo một phông chữ, vì vậy nó không có ý nghĩa để sử dụng em làm đơn vị độ dài chung trừ khi bạn đặc biệt muốn nó chia tỷ lệ theo tỷ lệ kích thước phông chữ.
Sử dụng em khi bạn đặc biệt muốn kích thước của một cái gì đó phụ thuộc vào kích thước phông chữ hiện tại.
% cũng là một đơn vị tương đối, trong trường hợp này, liên quan đến chiều cao hoặc chiều rộng của phần tử cha. Chúng là một lựa chọn tốt cho các đơn vị px cho những thứ như tổng chiều rộng của thiết kế nếu thiết kế của bạn không dựa vào kích thước pixel cụ thể để đặt kích thước của nó.
Sử dụng % đơn vị trong thiết kế của bạn cho phép thiết kế của bạn thích ứng với chiều rộng của màn hình / thiết bị, trong khi sử dụng một đơn vị tuyệt đối như px thì không.
Tôi có một máy tính xách tay nhỏ với độ phân giải cao và phải chạy Firefox ở chế độ phóng to văn bản 120% để có thể đọc mà không cần nheo mắt.
Nhiều trang web có vấn đề với điều này. Bố cục trở nên bị cắt xén, văn bản trong các nút bị cắt làm đôi hoặc biến mất hoàn toàn. Ngay cả stackoverflow.com cũng bị như vậy:
Lưu ý cách các nút trên cùng và các tab trang trùng nhau. Nếu họ đã sử dụng các đơn vị em thay vì px, thì sẽ không có vấn đề gì.
Lý do tôi hỏi câu hỏi này là vì tôi đã quên cách sử dụng em vì đó là lúc tôi đang hack hạnh phúc trong CSS. Mọi người đã không chú ý rằng tôi giữ câu hỏi chung chung vì tôi không nói về việc định cỡ phông chữ. Tôi quan tâm nhiều hơn đến cách xác định kiểu trên bất kỳ thành phần khối cụ thể nào trên trang.
Như Henrik Paul và những người khác đã chỉ ra em tỷ lệ thuận với kích thước phông chữ được sử dụng trong phần tử. Đó là một thực tế phổ biến để xác định kích thước trên các thành phần khối trong px, tuy nhiên, kích thước phông chữ trong trình duyệt thường phá vỡ thiết kế này. Thay đổi kích thước phông chữ thường được thực hiện với các phím tắt Ctrl+ +hoặc Ctrl+ -. Vì vậy, một thực hành tốt là sử dụng em thay thế.
Dưới đây là một ví dụ minh họa. Giả sử chúng tôi có thẻ div mà chúng tôi muốn biến thành hộp ngày sành điệu, chúng tôi có thể có mã HTML trông như thế này:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>Một triển khai đơn giản sẽ xác định chiều rộng của date-boxlớp trong px:
* { margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 50px;
}Tuy nhiên, nếu chúng tôi muốn tăng kích thước văn bản trong trình duyệt của mình, thiết kế sẽ bị hỏng. Văn bản cũng sẽ xuất hiện bên ngoài hộp gần giống với những gì xảy ra với thiết kế của SO như flodin chỉ ra. Điều này là do hộp sẽ vẫn giữ nguyên kích thước chiều rộng như được khóa 50px.
Thay vào đó, một cách thông minh hơn là xác định chiều rộng trong ems:
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 2.5em;
}
* { margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of ptBằng cách đó, bạn có một thiết kế chất lỏng trên hộp ngày, tức là hộp sẽ có kích thước cùng với văn bản tương ứng với kích thước phông chữ được xác định cho hộp ngày. Trong ví dụ này, kích thước phông chữ được xác định *là 10pt và sẽ tăng kích thước gấp 2,5 lần kích thước phông chữ đó. Vì vậy, khi bạn định cỡ phông chữ trong trình duyệt, hộp sẽ có kích thước gấp 2,5 lần kích thước phông chữ đó.
Ctrl+và Ctrl-trong bất kỳ trình duyệt hiện đại nào cũng sẽ chia tỷ lệ các giá trị pixel. Nó đã được như thế này trong một thời gian bây giờ.
Câu trả lời được bình chọn hàng đầu ở đây từ thomasrutter là đúng trong câu trả lời của anh ấy về em . Nhưng rất sai về kích thước của một pixel. Vì vậy, mặc dù nó đã cũ, tôi không thể để nó không bị ảnh hưởng.
Một màn hình máy tính thường KHÔNG 96dpi! (Hoặc ppi, nếu bạn muốn trở thành người phạm tội.)
Một pixel KHÔNG có kích thước vật lý cố định.
(Có, nó chỉ được cố định trong một màn hình, nhưng trong màn hình tiếp theo, pixel rất có thể lớn hơn hoặc nhỏ hơn và chắc chắn KHÔNG phải là 1/96 inch.)
Proof
Vẽ một dòng, dài 960 pixel. Đo nó với một thước đo vật lý. Có phải là 10 inch? Không..?
Kết nối máy tính xách tay của bạn với TV của bạn. Là dòng 10 inch bây giờ? Vẫn chưa?
Hiển thị dòng trên iPhone của bạn. Vẫn cùng kích thước? Tại sao không?
Ai là kẻ đã phát minh ra huyền thoại màn hình máy tính 96dpi?
(Một số tôn giáo hoạt động với một huyền thoại 72dpi. Nhưng cũng sai không kém.)
pxcó kích thước tương ứng với pixel tham chiếu , không phải pixel trên màn hình bạn đang ở đây. Bạn có thể không thích điều đó, nhưng việc đưa thước kẻ của bạn ra ngoài sẽ không làm cho nó trở thành sự thật, cũng như không góp phần trả lời câu hỏi. stackoverflow.com/questions/27382331/ Lời "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
Nó được sử dụng cho mọi thứ phải chia tỷ lệ theo kích thước phông chữ.
Nó đặc biệt hữu ích trên các trình duyệt thực hiện thu phóng bằng cách thu nhỏ kích thước phông chữ. Vì vậy, nếu bạn kích thước tất cả các yếu tố của bạn bằng cách sử dụng emchúng quy mô phù hợp.
Vì em ( http://en.wikipedia.org/wiki/Em_(typography) ) tỷ lệ thuận với kích thước phông chữ hiện đang sử dụng. Nếu cỡ chữ là 16 điểm thì một em là 16 điểm. Nếu kích thước phông chữ của bạn là 16 pixel ( lưu ý : không giống với điểm), một em là 16 pixel.
Điều này dẫn đến hai điều (liên quan):
2pxlà 0.125emcho một phông chữ 16 pixel.
thí dụ:
Mã: body {font-size: 10px;} // giữ ở mức 10 tất cả các kích thước bên dưới chính xác, thay đổi giá trị này và phần còn lại thay đổi thành ví dụ 1.4 của giá trị này
Giáo dục
thân hình
1
2
3
4
5
Bằng cách thay đổi giá trị trong cơ thể, phần còn lại sẽ tự động thay đổi thành một loại giá trị cơ bản.
10 × 2 = 20 10 × 1.6 = 16, v.v.
bạn có thể có giá trị cơ bản là 8px, vì vậy 8 × 2 = 16 8 × 1.6 = 12.8 // có thể được làm tròn bằng trình duyệt
Một lý do rất thực tế là IE 6 không cho phép bạn thay đổi kích thước phông chữ nếu được chỉ định bằng px, trong khi đó, nếu bạn sử dụng một đơn vị tương đối như em hoặc tỷ lệ phần trăm. Không cho phép người dùng thay đổi kích thước phông chữ là rất xấu cho khả năng truy cập. Mặc dù nó đang suy giảm, nhưng vẫn còn rất nhiều người dùng IE 6 ngoài kia.
Page > Text Size). Tuy nhiên, IE7 đã thêm thu phóng trang ( Page > Zoom) thu phóng toàn bộ trang, bao gồm cả văn bản, rõ ràng.
sử dụng px để đặt chính xác các yếu tố đồ họa. sử dụng em cho các phép đo phải thực hiện định vị và khoảng cách xung quanh các thành phần văn bản như chiều cao dòng, v.v. px là pixel chính xác, em có thể thay đổi linh hoạt với phông chữ được sử dụng
Lý do chính để sử dụng em hoặc tỷ lệ phần trăm là cho phép người dùng thay đổi kích thước văn bản mà không phá vỡ thiết kế. Nếu bạn thiết kế với các phông chữ được chỉ định trong px, chúng không thay đổi kích thước (trong IE 6 và các loại khác) nếu người dùng chọn kích thước văn bản - lớn hơn . Điều này là rất xấu cho người dùng có khuyết tật thị giác.
Đối với một số ví dụ và bài viết về các thiết kế như thế này (có vô số lựa chọn), hãy xem vấn đề mới nhất của A List Apart: Fluid Grids , bài viết cũ hơn Cách định cỡ văn bản trong CSS hoặc Thiết kế web chống đạn của Dan Cederholm .
Hình ảnh của bạn vẫn phải được hiển thị với kích thước px, nhưng nói chung, nó không được coi là hình thức tốt để định cỡ văn bản của bạn với px.
Nhiều như cá nhân tôi coi thường IE6, đây hiện là trình duyệt duy nhất được chấp thuận cho phần lớn người dùng trong công ty Fortune 200 của chúng tôi.
Có một giải pháp đơn giản nếu bạn muốn sử dụng px để chỉ định kích thước phông chữ, nhưng vẫn muốn khả năng sử dụng mà chúng cung cấp bằng cách đặt tệp này vào tệp CSS của bạn:
body {
font-size: 62.5%;
}Bây giờ chỉ định bạn p(và khác) các thẻ như thế này:
p {
font-size: 0.8em; /* This is equal to 8px */
font-size: 1.0em; /* This is equal to 10px */
font-size: 1.2em; /* This is equal to 12px */
font-size: 2.0em; /* This is equal to 20px */
}Và như thế.
font-size: 10px. css-tricks.com/forums/discussion/1230/ Cách
Bạn có thể muốn sử dụng em cho kích thước phông chữ cho đến khi IE6 không còn nữa (từ trang web của bạn). Px sẽ ổn khi thu phóng trang (trái ngược với thu phóng văn bản) trở thành hành vi tiêu chuẩn.
Traingamer đã cung cấp các liên kết cần thiết .
Pixel là một đơn vị tuyệt đối trong khi rem / em là đơn vị tương đối. Để biết thêm: https://dcraft.csswg.org/css-values-3/
Bạn nên sử dụng đơn vị tương đối khi bạn muốn kích thước phông chữ thích ứng theo kích thước phông chữ của hệ thống vì hệ thống cung cấp giá trị kích thước phông chữ cho thành phần gốc là thành phần HTML.
Trong trường hợp này, nơi trang web được mở bằng google chrome, kích thước phông chữ cho thành phần HTML được đặt bằng chrome, hãy thử thay đổi nó để xem hiệu ứng trên các trang web có phông chữ của các đơn vị rem / em.
Nếu bạn sử dụng pxlàm đơn vị cho phông chữ, phông chữ sẽ không thay đổi kích thước trong khi phông chữ có rem/em đơn vị sẽ thay đổi kích thước khi bạn thay đổi kích thước phông chữ của hệ thống.
Vì vậy, sử dụng pxkhi bạn muốn kích thước được cố định và sử dụng rem/ emkhi bạn muốn kích thước thích ứng / năng động với kích thước của hệ thống.
Sự đồng thuận chung là sử dụng tỷ lệ phần trăm cho kích thước phông chữ, bởi vì nó phù hợp hơn trên các trình duyệt / nền tảng.
Mặc dù điều đó thật buồn cười, tôi luôn sử dụng pt để định cỡ phông chữ và tôi cho rằng tất cả các trang web đều sử dụng nó. Bạn thường không sử dụng kích thước px trong các ứng dụng khác (ví dụ: Word). Tôi đoán đó là vì chúng để in - nhưng kích thước giống nhau trong trình duyệt web như trong Word ...
Tránh em hoặc px sử dụng rem thay vì vì nó dễ tìm giá trị tính toán hơn. Nhưng giữa em và px, px tốt hơn vì em khó gỡ lỗi.
