我只想在从手机或平板电脑查看图像时隐藏图像。
我怎样才能做到这一点?
在 imgs 上使用 'display: none' 仍然会下载不推荐的图像,因为它是一个浪费的 http 请求(您可以通过查看浏览器检查器中的网络选项卡来查看这一点[右键单击,在 Chrome 中检查元素]。只是刷新页面,您将看到正在下载的每个资产以及下载所需的时间。)。
相反,您可以将那些您不希望加载的特定图像作为背景图像加载到 div 上。
那么你需要做的就是:
@media (max-width: x) {
.rwd-img {
background-image: none;
}
当然,您必须在 CSS 中为您的 div 定义图像的高度和宽度,但这比牺牲用户体验更好。:)
感兴趣的链接:
http:
//css-tricks.com/on-responsive-images/
http://mattstow.com/responsive-and-retina-content-images-redux.html
使用带有媒体查询的级联样式表,您可以在查看者屏幕分辨率低于给定值时隐藏图像,例如当屏幕宽度小于 640 像素时。
@media screen and (max-width: 640px) {
.my-image {
display: none;
}
}