Tôi có nên xác định lề CSS theo pixel hoặc ems không? Tại sao? Khi nào?

Question

Chúng tôi có một tập tin CSS với một số quy tắc tương tự như sau:

.directory-result ul 
{ 
    margin-top: 20px; 
    width: 60em; 

} 

.about-text 
{ 
    margin-top: 1em; 
    margin-bottom: 1em; 
} 

Tất cả mọi thứ đang làm việc ok, nhưng chúng tôi đang tự hỏi cụ thể về những mâu thuẫn giữa các giá trị margin-top. Một là 20px và cái kia là 1em.

Lựa chọn nào phù hợp nhất? Tôi nên cân nhắc những điểm nào khi quyết định sử dụng điểm nào? Cảm ơn.

Answer 1

em đơn vị được sử dụng để có khả năng mở rộng tốt hơn của trang khi kích thước của các phần tử phụ thuộc vào quy mô của trang. Điều này đặc biệt quan trọng đối với các trình duyệt cũ (ví dụ: IE6) và nền tảng di động.

px đơn vị được sử dụng cho giá trị tuyệt đối, trong khi em liên quan đến kích thước phông chữ của phần tử cụ thể. 1em có nghĩa là một dòng chữ, ví dụ: bạn có một hộp với font-size 12px đó có nghĩa là 1em sẽ bằng 12px

Ngoài ra, sử dụng px dường như dễ dàng hơn vì bạn biết giá trị chính xác, nhưng em đơn vị kế thừa giá trị của container của họ.

<p>Text</p> 
<div class="box"> 
    <p>Lorem</p> 
</div> 

p { 
    font-size: 1.2em; 
} 

.box { 
    font-size: 1.2em; 
} 

Trong trường hợp này, các <p> đầu tiên sẽ có font-size bằng với cơ bản font-size * 1.2, và lần thứ hai <p> sẽ hiển thị với font-size * 1.2 * 1.2.

Answer 2

Chúng đơn giản là hai cách đo khác nhau. Em được liên kết với kích thước phông chữ (theo truyền thống, 1em xấp xỉ chiều rộng của chữ M trong một kiểu chữ đã cho), trong khi px là pixel.

Nếu bạn xây dựng mọi thứ bằng cách sử dụng em, mọi thứ sẽ mở rộng cho phù hợp khi người dùng điều chỉnh kích thước phông chữ của họ (ví dụ: sử dụng trình đơn Kích thước văn bản của trình duyệt IE). Nó cũng làm cho nó dễ dàng hơn để work to a vertical rhythm.

Điểm ảnh tốt hơn khi bạn muốn tạo thứ gì đó "hoàn hảo pixel". Lưu ý rằng pixel CSS không phải lúc nào cũng bằng pixel màn hình - chủ yếu là do trình duyệt hiện đại và thiết bị di động cho phép thu phóng. Đây không phải là vấn đề thường xuyên vì toàn bộ trang được thu nhỏ cho phù hợp.

Dù bạn làm gì, hãy đảm bảo rằng bạn nhất quán trong suốt - nó giúp cuộc sống trở nên dễ dàng hơn sau này.

Answer 3

Ngoài ra đây là một rất tốt trong chiều sâu hướng dẫn:

px – em – % – pt – keyword

Answer 4

Đơn vị ems là tương đối so với kích thước phông chữ hiện trong trình duyệt. Vì vậy, nếu người dùng tăng kích thước phông chữ * hoặc nếu bạn thay đổi kích thước phông chữ của phần tử trong CSS, các lề sẽ vẫn trông "đúng" tương ứng với văn bản.

* (Điều này không còn vấn đề gì nếu người dùng phóng to trang thay vì tăng kích thước văn bản (như là mặc định trong Firefox và Chrome bây giờ, và là một lựa chọn trong IE).

Nếu bạn đang sử dụng một lề để vị trí một cái gì đó một số tập hợp các điểm ảnh đi từ cái gì khác, sau đó bạn rõ ràng nên dính với điểm ảnh.

Answer 5

Trong ví dụ này directory-result ul đại diện cho một khối - một số loại danh sách/menu nơi kích thước pixel khá quan trọng. Chúng tôi không thể luôn dựa vào em xác định kích thước văn bản, bởi vì nếu chúng ta cần không gian 20px do một số hình nền - tốt, chúng tôi cần 20px, không thỏa hiệp.

Lưu ý rằng bạn không thể tạo và lưu hình ảnh tức là rộng 10em, do đó tôi không thấy lý do tại sao tôi nên sử dụng các đơn vị khác nhau trên trang web. Nó chỉ tạo ra sự nhầm lẫn và sau đó rất khó để duy trì bố cục.

Có một địa điểm mặc dù, nơi sử dụng em được khuyến khích - Tôi đang nói về các khối văn bản. Tôi đoán trong mã của bạn about-text được đặt trong văn bản khác, nơi thêm lề trên cùng/dưới cùng của 1em (chiều cao của văn bản) có ý nghĩa. Nó giống như trong bất kỳ trình soạn thảo văn bản nào (tức là khoảng cách dòng trong MS Word) - văn bản trông đẹp nhất khi khoảng cách giữa các dòng được xác định bằng cách nhân chiều cao của văn bản

Vì vậy, theo ý kiến ​​của tôi - ở mọi nơi bạn xử lý thiết kế và bạn sử dụng hình ảnh mặc định được đo bằng pixel - sử dụng pixels cho tất cả các phần đệm/lề.

Ở mọi nơi bạn xử lý văn bản bên trong khối văn bản và bạn muốn thêm khoảng cách giữa các nút văn bản - hãy sử dụng em.