更新
我有全屏背景图片。这给移动浏览带来了问题,因为图像又大又高分辨率。
下一个问题是视网膜显示之类的问题,设计人员/程序员如何准备处理这个问题?我看到很多关于如何在图像之间切换的文章。但后来我对像素密度与分辨率过于混淆了。何时何地需要它,以及如何以及为什么要以它们为目标。
例子:
*全屏背景图片,分辨率为 1900x1080,分辨率为 72dpi。为了获得最佳优化,每个分辨率/像素密度应该有多少图像?此外,在这种情况下,哪种库/插件/symantics 最适合解决这种情况?
最后,如果我使用媒体查询来定位和切换背景图片,它会下载所有图片吗?还是在满足要求时?
@media (min-device-width : 768px)
and (max-device-width : 1024px) {
background-image:url('paper1024.png');
}
@media only screen
and (min-width : 1824px) {
background-image:url('paper1900.png');
}
感谢堆栈
//旧问题不想删除它以供评论//
所以我正在制作一个带有全屏图像的响应式网站。我一直遇到的问题是原始图像对于移动设备下载来说太大了。
作为响应式设计的新手,我不知道这是一个问题,而是自己发现的。我看了一些文章
最好的存在:
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
我的问题是:我不相信<picture>
标签对公众开放?我找不到关于此的更多信息。
有人知道这是否被允许吗?此外,还有更多关于如何正确使用它的信息/文档。
如果picture
是不适用的。是否有任何“标准”主张在不增加移动带宽的情况下使图像具有响应性?
最佳答案
这是我在上一个项目中进行视网膜化的方式:
首先使用 background-image 在普通的 css 中设置桌面图像:
#bg {
background: image-url('wallpaper_desktop.jpg') center top;
background-size: 1024px 768px;
}
然后,我给手机打电话,例如苹果手机:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
#bg {
background: image-url('wallpaper_mobile.jpg') center top;
background-size: 320px 480px;
}
}
然后是视网膜图像处理。使用尺寸加倍的图像(请参阅文件名中的“@2x”):
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#bg {
background: image-url('wallpaper_mobile@2x.jpg') center top;
background-size: 320px 480px; // Original size
}
}
由于还有配备 Retina 显示屏的 iPad 和 MacBook,我们应该考虑为它们提供比高分辨率手机更大、更高分辨率的版本:
@media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
background: image-url('wallpaper_desktop@2x.jpg') center top;
background-size: 1024px 768px;
}
所以,通常我每张图片使用 4 个版本。 2 个桌面版本(一个用于 Retina 显示器的双倍尺寸)和 2 个移动版本(一个用于 Retina 显示器的双倍尺寸)
顺便说一句:当使用媒体查询附加图像时,没有附加请求。
关于javascript - 如何为移动体验制作响应式图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11277762/