Đơn vị ưu tiên khi thực hiện thiết kế đáp ứng là gì?

Question

Tôi đang xây dựng trang web đáp ứng và tôi tự hỏi tôi nên sử dụng đơn vị nào? Tôi đã nhìn thấy rất nhiều trang web sử dụng pixel (px) cho các phép đo và tôi đã thấy một số trang sử dụng phần trăm (%). Có cách nào được ưu tiên - hay đúng đắn để thực hiện thiết kế đáp ứng?

Tôi đã tìm thấy phần trăm khó sử dụng, vì nó làm cho việc tính toán trở nên khó khăn và tôi đã kết thúc với các giá trị như 2,754% v.v. khi thiết lập chiều rộng/lề vv trừ, nhưng tôi đã đọc rằng nó không phải là "bằng chứng trong tương lai" hoặc một cái gì đó như thế và sẽ không quy mô đúng nếu người dùng phóng to trong cửa sổ trình duyệt. Điều đó vẫn đúng?

Nếu bạn có bất kỳ kinh nghiệm hoặc chuyên môn nào, vui lòng chia sẻ! Tôi rất thích nghe những gì các bạn phải nói!

Cảm ơn!

Answer 1

Sử dụng tỷ lệ phần trăm cùng với chiều rộng tối thiểu và chiều rộng tối đa tính bằng pixel. Điều này dừng tỷ lệ phần trăm làm cho div của bạn quá nhỏ hoặc quá lớn. ví dụ:

div { 
    width:100%; //full width of browser 
    max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding 
} 

Answer 2

Tất nhiên bạn phải sử dụng tỷ lệ phần trăm. Nhưng với các phím số min-height, max-height, min-width, max-width CSS.

Đối với thế hệ tiếp theo

vw và vh. Vw là 1/100 chiều rộng của cửa sổ và vh bằng 1/100 chiều cao của cửa sổ. Để đáp ứng, họ sẽ là đơn vị mới.

Answer 3

Đối bố trí loại những thứ như kích thước của hộp, bạn muốn sử dụng % bởi vì bạn sẽ thường có nhiều cột có kích thước như một tỷ lệ của công ty mẹ của họ mà sẽ ngăn xếp trên đỉnh của nhau tại một breakpoint nhất định (width:100%) . Không có đơn vị nào khác cho phép bạn lấp đầy 100% không gian như %.

Đối với padding/margins sử dụng em, thông thường bạn sẽ muốn không gian các phần tử của bạn liên quan đến kích thước văn bản của bạn. Với em (với ký tự 'M'), bạn có thể dễ dàng nói rằng tôi muốn khoảng cách khoảng 1 ký tự ở đây.

Đối với giáp bạn có thể sử dụng px hoặc em, có sự khác biệt. Nếu bạn muốn đường viền của mình trông rộng một pixel trên tất cả các thiết bị, hãy sử dụng 1px. Tuy nhiên, nó có thể không phải là một pixel trên tất cả các thiết bị, màn hình có mật độ cao chuyển đổi 1px thành 2px chẳng hạn. Nếu bạn muốn đường viền của mình có kích thước dựa trên phông chữ, hãy sử dụng em.

Đối phông chữ sử dụng em (hoặc %), việc sử dụng em mang thông qua cha mẹ với con cái và nó chỉ là một đơn vị đẹp hơn để làm việc với hơn px.