Hỗ trợ IE8 cho CSS Media Query

IE8 không hỗ trợ truy vấn phương tiện CSS sau:

@import url("desktop.css") screen and (min-width: 768px);

Nếu không, cách viết thay thế là gì? Điều tương tự cũng hoạt động tốt trong Firefox.

Bất kỳ vấn đề với mã dưới đây?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

Các phiên bản Internet Explorer trước IE9 không hỗ trợ truy vấn phương tiện .

Nếu bạn đang tìm cách làm giảm thiết kế cho người dùng IE8, bạn có thể thấy nhận xét có điều kiện của IE hữu ích. Sử dụng điều này, bạn có thể chỉ định một biểu định kiểu cụ thể IE 8/7/6 ghi đè lên các quy tắc trước đó.

Ví dụ:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Điều này sẽ không cho phép thiết kế đáp ứng trong IE8, nhưng có thể là một giải pháp đơn giản và dễ truy cập hơn so với sử dụng plugin JS.

css3-mediaqueries-js có lẽ là thứ bạn đang tìm kiếm: tập lệnh này mô phỏng các truy vấn phương tiện. Tuy nhiên (từ trang của tập lệnh), nó "không hoạt động trên các @importbảng định kiểu ed (dù sao bạn không nên sử dụng vì lý do hiệu suất). Cũng sẽ không nghe thuộc tính đa phương tiện của các phần tử <link>và <style>".

Trong bối cảnh đó bạn có đơn giản hơn Respond.js , cho phép chỉ min-widthvà max-widthphương tiện truyền thông truy vấn.

Giải pháp tốt nhất mà tôi đã tìm thấy là Respond.js đặc biệt nếu mối quan tâm chính của bạn là đảm bảo thiết kế đáp ứng của bạn hoạt động trong IE8. Nó khá nhẹ với tốc độ 1kb khi min / gzip và bạn có thể chắc chắn rằng chỉ có các máy khách IE8 tải nó:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

Đây cũng là phương pháp được đề xuất nếu bạn đang sử dụng bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (và các phiên bản thấp hơn) và Firefox trước 3.5 không hỗ trợ truy vấn phương tiện. Safari 3.2 hỗ trợ một phần cho nó.

Có một số cách giải quyết sử dụng JavaScript để thêm hỗ trợ truy vấn phương tiện vào các trình duyệt này. Thử những thứ này xem:

Plugin jQuery Queries Media (chỉ giao dịch với độ rộng tối đa / phút)

css3-mediaqueries-js - một thư viện nhằm mục đích thêm hỗ trợ truy vấn phương tiện vào các trình duyệt không hỗ trợ

Lấy từ trang dự án css3mediaqueries.js.

Lưu ý: Không hoạt động trên các bảng định kiểu @ import'ed (dù sao bạn không nên sử dụng vì lý do hiệu suất). Cũng sẽ không lắng nghe thuộc tính truyền thông của các yếu tố <link>và <style>.

Một cách dễ dàng để sử dụng css3-mediaqueries-js là bao gồm các mục sau trước khi đóng thẻ body:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

Câu trả lời được chỉnh sửa: IE hiểu chỉ màn hình và in dưới dạng phương tiện nhập. Tất cả các CSS khác được cung cấp cùng với câu lệnh nhập khiến IE8 bỏ qua câu lệnh nhập. Trình duyệt Geco như safari hoặc mozilla không gặp phải vấn đề này.

Các truy vấn phương tiện hoàn toàn không được hỗ trợ trong IE8 trở xuống.

Cách giải quyết dựa trên Javascript

Để thêm hỗ trợ cho IE8, bạn có thể sử dụng một trong một số giải pháp JS. Ví dụ: Phản hồi có thể được thêm vào để thêm hỗ trợ truy vấn phương tiện cho IE8 chỉ với mã sau:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries là một thư viện khác thực hiện điều tương tự. Mã để thêm thư viện đó vào HTML của bạn sẽ giống hệt nhau:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Thay thế

Nếu bạn không thích một giải pháp dựa trên JS, bạn cũng nên xem xét việc thêm một biểu định kiểu chỉ dành cho IE <9 trong đó bạn điều chỉnh kiểu dáng cụ thể cho IE <9. Vì vậy, bạn nên thêm HTML sau vào mã của mình:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Ghi chú :

Về mặt kỹ thuật, đây là một lựa chọn khác: sử dụng các bản hack CSS để nhắm mục tiêu IE <9. Nó có tác động tương tự như bản định kiểu IE <9, nhưng bạn không cần một bản định kiểu riêng biệt cho điều đó. Mặc dù vậy, tôi không khuyến nghị tùy chọn này vì chúng tạo ra mã CSS không hợp lệ (đó là một trong nhiều lý do tại sao việc sử dụng các bản hack CSS thường được sử dụng ngày nay).

Trước Internet Explorer 8 không có hỗ trợ cho các truy vấn Media. Nhưng tùy thuộc vào trường hợp của bạn, bạn có thể thử sử dụng các nhận xét có điều kiện để chỉ nhắm mục tiêu Internet Explorer 8 trở xuống. Bạn chỉ cần sử dụng một kiến ​​trúc tệp CSS thích hợp.

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Tôi đã sử dụng @media \0screen {}và nó hoạt động tốt với tôi trong REAL IE8.

IE đã không thêm hỗ trợ truy vấn phương tiện cho đến IE9. Vì vậy, với IE8, bạn không gặp may.