Tỷ lệ phần trăm hoặc Pixel cho bố cục?


9
  • Bạn sẽ sử dụng gì cho bố cục trang web? Tỷ lệ hay pixel?
  • Khi nào nên sử dụng cái này hơn cái kia?

3
Không - sử dụng em ;-)
Armand

(Đó là "em" thuật ngữ đánh máy, không phải "em" thẻ HTML, trong trường hợp bất kỳ ai sử dụng kính râm.)
Frank Shearar

4
@ Alison: không phải bạn có nghĩa là "Không - sử dụng em s"?
Alan Pearce

1
Nền tảng mục tiêu? Rõ ràng sẽ là tỷ lệ phần trăm, nhưng thật không may vì hầu hết các tài sản đồ họa của bạn sẽ không có tỷ lệ độc đáo, tôi sẽ đề xuất pixel
dvhh

Hmmmm @Alan bạn có thể đúng :-)
Armand

Câu trả lời:


11

Đơn vị bạn sử dụng phụ thuộc hoàn toàn vào những gì bạn muốn thực hiện. Các đơn vị được sử dụng nhiều nhất trong bố trí web là:

  • px - tuyệt đối; một pixel
  • pt - tuyệt đối; 1/72 inch, khoảng 1,3px cho phương tiện màn hình
  • em - liên quan đến kích thước phông chữ cha mẹ; 1.0em = kích thước của một ký tự (chiều rộng của chữ hoa M)
  • % - so với cha mẹ

Bạn sử dụng px cho các kích thước không đổi, ví dụ đường viền 1px.
Bạn sử dụng em cho các kích thước nên theo kích thước phông chữ, ví dụ lề 3.0em.
Bạn sử dụng% cho các kích thước sẽ chiếm tỷ lệ phần trăm của cha mẹ, ví dụ: chiều rộng 50%.

Đối với bố cục trang web, bạn thường sử dụng pixel hoặc tỷ lệ phần trăm tùy thuộc vào việc bạn muốn bố trí (pixel) cố định hay bố cục dựa trên chất lỏng (phần trăm).


Một chút nit để chọn: một em là chiều rộng, không phải chiều cao của chữ M viết hoa trong kiểu chữ truyền thống. Không có gì đáng ngạc nhiên, một en là chiều rộng của chữ hoa chữ thường. Một ex là thước đo chiều cao dựa trên ký tự.
Stan Rogers

@Stan Rogers: Tôi chưa bao giờ nói rằng đó là chiều cao của chữ M viết hoa, một người khác đã chỉnh sửa nó.
Guffa

Điều quan trọng là thông tin được cung cấp là chính xác như chúng ta có thể làm cho nó, chứ không phải ai đặt nó ở đó. (Tôi chưa thể chỉnh sửa câu trả lời không phải wiki của người khác, vì vậy bình luận là cách tốt nhất tôi có thể làm.)
Stan Rogers

Kích thước điểm không tuyệt đối trừ khi bạn biết độ phân giải chính xác của thiết bị đầu ra và hệ số tỷ lệ mà người dùng đã đặt (UI độc lập với độ phân giải, XP 'phông chữ lớn', v.v.). Ngoài ra, iPhone 4 là 326 dpi, nhiều hơn đáng kể so với 72dpi
JBRWilkinson

@JBRWilkinson: Đó là một biện pháp tuyệt đối cho bất kỳ thiết bị nào. Nó tuyệt đối như đơn vị px; kích thước của một pixel cũng khác nhau đối với bất kỳ màn hình nào.
Guffa

1

Tôi có xu hướng sử dụng pixel cho khai báo chiều rộng (thường là cố định), nhưng em là chiều cao. Bằng cách đó, bố cục thay đổi kích thước theo chiều dọc - nhưng duy trì tính nhất quán theo chiều ngang.


1

Tôi sử dụng kích thước tương đối / tỷ lệ bất cứ khi nào có thể. Tôi thấy nó làm cho việc thay đổi bố cục sau này dễ dàng hơn nhiều. Ngoài ra, sử dụng kích thước tương đối với phần tử cha có nghĩa là thay đổi đối với phần cha mẹ dễ dàng bị lừa.

Theo truyền thống, sử dụng kích thước tương đối cũng cho phép các trang nhìn chính xác ở các độ phân giải khác nhau và đặc biệt có lợi cho thu phóng trình duyệt hoặc kích thước phông chữ tối thiểu. Nhưng các trình duyệt hiện đại hiện xử lý thay đổi kích thước cực kỳ tốt với bố cục dành riêng cho pixel, thậm chí phóng to hình ảnh khi cần thiết. Vì vậy, nó trở nên ít quan trọng hơn để sử dụng kích thước tương đối.

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.