Media queries for Internet Explorer 8 and 9

Asked

Viewed 474 times

2

How to make IE 8 and 9 read Media Query conditions? I’ve read some Ocs but found nothing enlightening.

The query is being made in the HTML example and I would not like to apply only in a single CSS.

<link rel="stylesheet" media="screen and (max-width: 1366px)" href="css/1366.css" />
html5 css3 responsive-layout media-queries

1 answer

3

Some things to consider:

IE9 has support for media-query, but you need to make sure to be in standards mode, namely, your <doctype> have to be correct, and the proper care with the html taken. Note that IE9 does not respect media-queries inside <iframe>.

As for IE8, there is no use media-query. The solution would be for a conditional comment, as the code below, and load a specific javascript to resolve the subject.

It is worth remembering that you practically will not have IE8 on mobile devices, so maybe a simplified CSS within the conditional comment already solve.

Here is the conditional comment:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="estilo_ie8.css"/>
... e/ou ponha seu JS aqui...
<![endif]-->

Worth a look at Respond.js for this purpose.

  • worth the considerations, I will use Respond.js and check how it looks.

Browser other questions tagged html5 css3 responsive-layout media-queries

You are not signed in. Login or sign up in order to post.