Css Internet Explorer 8使用视网膜像素比率媒体查询
我正在用SASS/Compass建立一个响应迅速的网站,我还包括视网膜图标(使用生成的精灵)。我在我的.scs中添加了一个mixin图标 我的视网膜图标混合:Css Internet Explorer 8使用视网膜像素比率媒体查询,css,internet-explorer-8,sass,media-queries,retina,Css,Internet Explorer 8,Sass,Media Queries,Retina,我正在用SASS/Compass建立一个响应迅速的网站,我还包括视网膜图标(使用生成的精灵)。我在我的.scs中添加了一个mixin图标 我的视网膜图标混合: // Retina icons @mixin sprite-background($name, $xpos: 0px, $ypos: 0px, $xpos2x: $xpos, $ypos2x: $ypos, $size: image-width(sprite-file($icons, $name))) { background-ima
// Retina icons
@mixin sprite-background($name, $xpos: 0px, $ypos: 0px, $xpos2x: $xpos, $ypos2x: $ypos, $size: image-width(sprite-file($icons, $name))) {
background-image: sprite-url($icons);
background-position: sprite-position($icons, $name, $xpos, $ypos);
background-repeat: no-repeat;
display: block;
@media all and ($pixel-ratio) {
@if (sprite-position($icons, $name) != sprite-position($icons2x, $name)) {
background-position: $xpos2x $ypos2x;
}
@include background-size($size auto);
background-image: sprite-url($icons2x);
}
}
变量:
$pixel-ratio: "-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5";
用法:
.selector {
@include sprite-background(clock_small, 0px, 2px, 0px, -1013px, 45px);
}
我遇到的问题是,Internet Explorer 8正在将我的视网膜精灵用作背景图像
,并且在背景大小
上失败。我知道IE8不支持背景大小,所以它被忽略了,但这意味着我的图标定位不正确
使用javascript,您可以找到当前的像素比率:
alert(window.devicePixelRatio);
此警报提示:Internet Explorer中的未定义。
为什么我的“视网膜媒体查询”接受未定义的
作为有效数字,并执行其css?是否有解决方法?如果devicePixelRatio未定义,则可以为其指定默认值
window.devicePixelRatio = window.devicePixelRatio || 1
我使用javascript进行调试。我无法控制我和它的混合。我遇到的问题是,我的视网膜媒体查询认为undefined
比1.5
的数字要高,所以它的css会被执行。也许你可以试试这个:document.body.className+=!(window.devicePixelRatio)| |(window.devicePixelRatio可能的副本)