Làm cho các thuộc tính CSS phụ thuộc vào chiều rộng của trình duyệt:

Question

Tôi có cấu trúc biểu mẫu phụ thuộc vào chiều rộng cửa sổ trình duyệt: để đơn giản hóa câu hỏi, giả sử nó có ba cấp độ (bắt đầu từ trường hợp rộng nhất):

1. nhãn trường bên trái, lĩnh vực đầu vào ở trung tâm và mô tả lĩnh vực trên nhãn
2. Dòng chuột phải vào bên trái, lĩnh vực đầu vào ở trung tâm và lĩnh vực mô tả bên dưới trường nhập
3. nhãn trường lên hàng đầu, trường nhập ở phần giữa và mô tả trường ở dưới cùng

Nó được thực hiện bởi một cái gì đó như thế này:

@media (max-width:1000px) { /* code for 1. */ } 
@media (max-width:900px) { /* code for 2. */ } 
@media (max-width:800px) { /* code for 3. */ } 

Những gì tôi đang yêu cầu là để có được các chức năng tương tự cho tất cả yếu tố, vì vậy khi tôi đặt một form vào div có 1000px chiều rộng, CSS sẽ áp dụng cho các thuộc tính cụ thể form tương tự được sử dụng để tạo kiểu bố cục thứ nhất (max-width:1000px). Khi điều này div sẽ thu nhỏ thành 800px, form sẽ tự động được đặt lại thành bố cục thứ 3 ngay cả khi cửa sổ duyệt vẫn có chiều rộng được đặt thành 1000px.

Có thể không?

Answer 1

Nhờ có sự liên kết thứ hai trong bình luận @ torazaburo dưới bài câu hỏi, tôi thấy giải pháp hoàn hảo:

https://github.com/marcj/css-element-queries

Tuy nhiên, dự án rất trẻ vẫn còn có một số lỗ hổng bảo mật ities (29 tháng 7 năm 2013) nhưng cũng có tiềm năng. Nó không dựa trên các truy vấn @element nhưng trên attributes. Ví dụ:

.fooDiv[min-width="1000px"] .form { /* code for 1. */ } 
.fooDiv[min-width="900px"] .form { /* code for 2. */ } 
.fooDiv[min-width="800px"] .form { /* code for 3. */ } 

Thuộc tính đó được đặt bởi người nghe, do đó chúng hoạt động theo từng thay đổi kích thước .fooDiv.

---

Một dự án (tương thích với Sass/SCSS),

https://github.com/Mr0grog/element-query

sẽ làm việc như sau:

.test-element:media(max-available-width: 400px) { 
    background: purple; 
} 

Trong CSS trên, .test-element sẽ có một màu tím nền nếu nó nằm trong một phần tử có chiều rộng là 400px.

---

Tuy nhiên, một,

https://github.com/tysonmatanich/elementQuery tôi sử dụng nó trong các dự án hàng ngày.

---

Thậm chí nhiều hơn về vấn đề này:

http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/

Answer 2

Không phải là tôi biết nếu xét về css thẳng lên. Bạn có thể kết hợp jQuery để đạt được điều này. Ví dụ về jQuery:

$(document).ready(function() { 
    box_size(); 

    $(window).resize(function() { 
     box_size(); 
    }); 

    function box_size() { 
     var window_width = $(window).width(); 

     $('.box').removeClass('break-one').removeClass('break-two').removeClass('break-three'); 

     if (window_width <= 1000 && window_width > 900) { 
      $('.box').addClass('break-one'); 
     } 
     else if (window_width <= 900 && window_width > 800) { 
      $('.box').addClass('break-two'); 
     } 
     else if (window_width <= 800) { 
      $('.box').addClass('break-three'); 
     } 
    } 
}); 

Chức năng này được gọi hai lần. Một lần khi nó tải để kiểm tra kích thước và một lần nữa khi trình duyệt thay đổi kích thước.

Css:

.box { 
    color: black; 
} 

.box.break-one { 
    color: red; 
} 

.box.break-two { 
    color: blue; 
} 

.box.break-three { 
    color: yellow; 
} 

Dĩ nhiên nhìn thấy nó trong hành động trong jsfiddle: http://jsfiddle.net/PWbvY/