I made the front end of a site where your main layout was 1920px and I'm adapting to other screens, using:
@media (min-width: 0px) and (max-width: 1920px) {}
I saw that IE8 is not working, is there any alternative to work around this?
I made the front end of a site where your main layout was 1920px and I'm adapting to other screens, using:
@media (min-width: 0px) and (max-width: 1920px) {}
I saw that IE8 is not working, is there any alternative to work around this?
IE8 does not support media queries, so what you can do is a fallback for this using this face:
And you can deploy to your front two ways:
<!-- Respond.js IE8 support media queries -->
<!--[if lt IE 9]>
<script src="<path>/respond.min.js"></script>
<![endif]-->
Or using Modernizr and checking browser support for media queries
Modernizr.load({
test: Modernizr.mq('only all'),
nope: <path>/respond.min.js
});
I think IE8 does not support media queries:
Then it would have to be a javascript solution that would hear the window.onresize
event, and for example, change the class
attribute of body
(eg something like class="width-600"
, or class="width-1000"
) to simulate media queries. So you could put specific selectors in the CSS for each class assigned to body
by the script:
.width-600 seletor {
/* estilos para seletor quando a resolução for até 600 */
}
.width-1000 seletor {
/* estilos para seletor quando a largura for de 600 até 1000 */
}
If you are using jQuery:
$(window).resize(
/* função de redimensionamento */
var w = $(window).width(),
$body = $("body");
$body.removeClass("width-600 width-1000");
$body.addClass(w <= 600 ? "width-600"
: w <= 1000 ? "width-1000"
: "width-1000plus");
);
The class width-1000plus
is for when the width is greater than 1000 pixels.