Question

我想在我的网站上使用自适应图片，根据屏幕尺寸加载不同的分辨率，并提出一个简单的JavaScript方法，请参阅下文。

是否有任何理由不使用此解决方案？

谢谢！

<script language="Javascript"> 
var w=window.innerWidth;

if (w<=480){
    document.write('<img src="files/design/logo_480.jpg" ');        
}else if(w<=768){
    document.write('<img src="files/design/logo_768.jpg" ');   
}else{
    document.write('<img src="files/design/logo_960.jpg" >');
}

</script>

Answer 1

您可以使用内置浏览器的图片元素。见这里：http://googlechrome.github.io/samples/picture-element/

此处有更多信息on htmlrocks

Answer 2

使用标准并使用picture或srcset sizes（取决于您的使用案例）。

关于浏览器支持，有两种填充，您只需使用它们：

使用部分自定义解决方案确实没有理由。

这是article series。

Answer 3

我不了解浏览器支持规范，但有HTML5方法：<picture>元素。但它支持的浏览器很少 - http://caniuse.com/#feat=picture

更新

另一种方法 - 使用CSS和@media规则。但是在这里你将处理背景图像，而不是可能不符合语义的<img>元素（When to use IMG vs. CSS background-image?）：

@media screen and (max-width: 480px) {
    div.my-image {
        background-image: url(files/design/logo_480.jpg);
    }
}

@media screen and (max-width: 768px) {
    div.my-image {
        background-image: url(files/design/logo_768.jpg);
    }
}

@media screen and (min-width: 768px) {
    div.my-image {
        background-image: url(files/design/logo_960.jpg);
    }
}

浏览器支持 - IE9 +，Chrome 21 +，FF 3.5+（http://www.w3schools.com/cssref/css3_pr_mediaquery.asp）

更新＃2

另一种方法 - 您只需更改现有write的{{1}}，而不是src内容。

<img>

Answer 4

请看一下为什么不应该使用document.write https://stackoverflow.com/a/802943/2767886

你不应该使用这个JS，因为：

您必须添加resize-event（如果更改窗口宽度需要更新徽标大小）
关于调整新徽标的大小 - 网址 - ＆gt;将是一个新的加载请求
它的document.write ...
有javascript off的人不会看到徽标

纯CSS解决方案会更容易：

@media screen and (max-width: 480px) {
    .logo {
        background-image: url(files/design/logo_480.jpg);
        width: 480px; height: 75px;
    }
}

@media screen and (max-width: 768px) {
    .logo {
        background-image: url(files/design/logo_768.jpg);
        width: 768px; height: 100px;
    }
}

@media screen and (min-width: 768px) {
    .logo {
        background-image: url(files/design/logo_960.jpg);
        width: 960px; height: 150px;
    }
}

用javascript document.write响应图像

4 个答案: