Tôi đã có một vấn đề tương tự mà tôi cần phải có một chiều rộng cố định cột bên trái (cấu trúc menu) nhưng có cột bên phải thay đổi kích thước một cách đáp ứng như trình duyệt đã được giảm xuống.
Tôi đã kết thúc triển khai một vài truy vấn phương tiện bổ sung (chúng đã tồn tại để xử lý các trường hợp cạnh khác) và tìm chiều rộng phần trăm của cột bên phải làm việc cho truy vấn phương tiện đó. Điều này không "nhảy" một chút (tôi chỉ sử dụng 2 "truy vấn phương tiện bổ sung" trên thiết bị cầm tay/máy tính bảng/máy tính để bàn tiêu chuẩn) nhưng ở tất cả các độ phân giải ở giữa nó sẽ không vi phạm dòng tiếp theo. Trong thực tế bạn đang điều chỉnh ngữ cảnh trong mỗi truy vấn phương tiện trước khi nó có thể phá vỡ. Các truy vấn phương tiện khác sẽ bằng các ngắt nhỏ hơn khi trình duyệt được thay đổi kích thước.
Tôi ổn với các bước nhảy vì tôi không xây dựng cho trường hợp sử dụng của ai đó thay đổi kích thước trình duyệt của họ, mà là đảm bảo nó hoạt động được chấp nhận trên các thiết bị có độ phân giải khác nhau.
Một báo trước, khi tìm chiều rộng phần trăm của cột bên phải, chiều rộng cơ sở được sử dụng là chiều rộng của truy vấn phương tiện bạn đang ở, không phải chiều rộng đầy đủ ban đầu. Ngoài ra, bạn phải sử dụng chiều rộng tối thiểu và sử dụng kích thước hoạt động ở độ phân giải nhỏ nhất cho mỗi phần truy vấn phương tiện.
/* 641+ */
@media all and (min-width:641px) {
.itemDetailLanding {
width: 58.81435257410296%; /* 377/641 */
}
}
/* 725-768 */
@media all and (min-width: 725px) {
.itemDetailLanding {
width: 63.44827586206897%; /* 460/725 */
}
}
/* 769+ */
@media all and (min-width: 768px) {
.itemDetailLanding {
width: 65.625%; /* 504/768 */
}
}
/* 860-990 */
@media all and (min-width: 860px) {
.itemDetailLanding {
width: 69.18604651162791%; /* 595/860 */
}
}
/* 990+ */
@media all and (min-width:990px) {
.itemDetailLanding {
width: 74.04040404040404%;
}
}
bạn có dự định sử dụng cột "chào thế giới" hoặc chiều rộng cố định làm người giữ chỗ cho biểu trưng hay không? Tôi đã gặp vấn đề này bằng cách sử dụng truy vấn phương tiện nhưng lại không được hỗ trợ trong tất cả các phương tiện. – Xavier
Tôi nên giải thích - cột "Hello world" sẽ chứa cột lớn nhất - ví dụ: văn bản nội dung của bài đăng. Hai cột còn lại là dành cho nội dung thanh bên. Tôi dự định sử dụng truy vấn phương tiện, nhưng tôi đang hướng đến một bố cục chất lỏng sẽ thay đổi kích thước mượt mà lên và xuống, muốn tránh nhảy giữa các kích thước nếu tôi có thể. –