Đồng bộ hóa các truy vấn phương tiện truyền thông CSS và JS qua trình duyệt

Question

Khi làm việc trên các thiết kế đáp ứng, tôi sử dụng truy vấn phương tiện CSS3, bao gồm cả các trình duyệt cũ sử dụng response.js. Đôi khi tôi cũng cần sử dụng JavaScript/jQuery để thao tác một số phần tử trên trang. Tuy nhiên, khi sử dụng $ (window) .width(), giá trị đó thường khác với giá trị được sử dụng trong truy vấn phương tiện CSS do trình duyệt chrome và/hoặc sự hiện diện của thanh cuộn dọc, nghĩa là truy vấn phương tiện CSS sẽ kích hoạt điểm ngắt khác với truy vấn phương tiện JS.

Tôi biết Modernizr làm giảm bớt vấn đề này thông qua việc sử dụng Modernizr.mq, nhưng chỉ hoạt động trong các trình duyệt hỗ trợ truy vấn phương tiện CSS để bắt đầu, thường có nghĩa là nó sẽ không hoạt động trong IE8 trở xuống. Và nếu bạn sử dụng một polyfill để thêm hỗ trợ truy vấn phương tiện cho các trình duyệt cũ hơn (ví dụ: response.js), thì Modernizr.mq không còn hoạt động do xung đột/ghi đè giữa hai trình duyệt.

Điều tôi đã thực hiện thay vì được thực hiện bằng cách sử dụng phần tử đầu vào bị ẩn trên trang và cho nó một kiểu chiều rộng CSS trong mỗi truy vấn phương tiện. sau đó tôi có một chức năng chạy tự động trên trang (và đã đổi kích thước) mà được rằng giá trị chiều rộng và thực hiện như sau:

 if (width == "320px") { 
      //Functions 
     } 

     //481px to 600px 
     else if (width == "481px") { 
      //Functions 
     } 

     //601px to 768px 
     else if (width == "601px") { 
      //Functions 
     } 

     //769px to 960px 
     else if (width == "769px") { 
      //Functions 
     } 

     //769 to 1024px 
     else if (width == "961px") { 
      //Functions 
     } 

     //1024px+ 
     else { 
      //Functions 
     } 

này về cơ bản buộc JS để làm việc hoàn toàn tắt của các truy vấn phương tiện CSS, đồng bộ các hai. Điều này có thể trở nên cụ thể hơn là chung chung như tôi có, thay vì bắn dựa trên một yếu tố cụ thể và một phong cách cụ thể thay đổi trên yếu tố đó, nó phụ thuộc vào nhu cầu của từng dự án.

Câu hỏi của tôi là, có cách nào đơn giản hơn để thực hiện việc này không? Tôi đã dành thời gian đáng kể xem xét và thử nghiệm với điều này và nó có vẻ là lựa chọn tốt nhất cho đến nay mà sẽ đưa vào tài khoản trình duyệt cũ là tốt.

Answer 1

PPK được liệt kê một cách tốt đẹp để ghép CSS & JS trên blog của mình mà loại phương pháp sao lưu của bạn:

@media all and (max-width: 900px) { 
// styles 
} 

if (document.documentElement.clientWidth < 900) { 
    // scripts 
} 

bài đầy đủ của ông trên đó là here.

Ngoài ra còn có plugin enquire.js.