javascript - 获取屏幕大小以选择匹配的标题图片

Question

嘿，我有一个用于检查屏幕尺寸和选择匹配图片的 JavaScript 解决方案。但不幸的是我把这个弄丢了。

我的问题:我想选择与屏幕尺寸相关的标题图片(无法响应 CSS)。分辨率为 1920x1080 的访客将看到与此尺寸匹配的图片。对于通常的尺寸，我会制作特殊的标题图片。

当访问者禁用 JavaScript 时，他应该会看到一张标准图片。

移动设备有自己的 header 。

谁能帮帮忙……谢谢:)

最好的问候玛德琳

Answer 1

检查屏幕尺寸的方法有很多:

如果您使用的是 jQuery，您可以按以下方式使用屏幕对象:

screen.width;

您还可以使用以下方法获取窗口或文档的大小:

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

这是一个使用纯 JavaScript 的跨浏览器解决方案:

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

关于不使用媒体查询的响应式图片，Flexbox 是一个很好的解决方案:

body { margin: 0; background: #333; }
header { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
header div { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}
header div img { 
  width: 100%; 
  height: auto; 
}

<header>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" alt></div>
</header>

调整此 Codepen 的大小查看 Flexbox 响应式 header

如果您的标题图片设置为背景图片，您可以设置:

background-size: contain

background-size: cover

希望对您有所帮助。